什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？

Question

什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？

Answer 1

简单的说，我们打开一个页面，这个页面是个单页应用：http://www.this-is-a-spa.com/
所以它仅仅只有一个页面，不过作者却做了好几个 URL：

http://www.this-is-a-spa.com/a
http://www.this-is-a-spa.com/b
http://www.this-is-a-spa.com/c
...

这些 URL 不会直接传给服务器，而是会被浏览器消化处理掉.

这样做，我们可以：

• 当浏览器读取到其中一个注册到前端路由中的 URL 请求时，比如 http://www.this-is-a-spa.com/a 时，可以触发预先写好的事件 A，所以当访问到这个 URL 后就可以直接触发到事件。在编写的时候可以用 <a href="/a">Event A</a> 来触发事件，而可以不用 addEventListener("click", ...) 这种写法，当项目逻辑比较复杂的时候，这种组织方式比写一大堆事件注册要好很多.（当然上 SPA 一般都用到了框架，这种方式只是一种选择）

• 用户可以收藏 http://www.this-is-a-spa.com/a 至收藏夹，打开后直接触发 /a 的事件（然后就自动加载数据或是什么别的事情），而没有做前端路由的 SPA 则达不到这样的效果，其 URL 从头到尾都是不变的.

所以~

• 什么是前端路由：路由交给浏览器处理就算是吧？有没有教科书式的标准定义？

• 什么时候适合用：SPA 就可以用，其实还是看产品需求.

• 优点：如上；

• 缺点：前端开发麻烦？还需要学习一个？如果也算缺点吧.

Answer 2

前端路由和后端路由, 本质上并没有什么不同

前端路由更多用在单页应用上, 也就是SPA, 因为单页应用, 基本上都是前后端分离的, 后端自然也就不会给前端提供路由

这东西没什么优点缺点可言, 主要看项目是否需要

Answer 3

楼上已经回答的差不多了，我补充下：
如果你使用 react 那么你会用到 react-router
如果你使用 Vue 那么你会用到 vue-router

这两个都是前端路由 都是做SPA用到的
友情提示一点，用到前端路由的时候，都不会绕过这个问题：http://stackoverflow.com/questions/31519505/how-to-setup-nginx-to-deploy-different-single-page-apps-spas-i-e-static-fil

简单说就是把前端的路由在服务端指向一个文件，否则就404啦。

Answer 4

1，什么是前端路由？

• 路由是根据不同的 url 地址展示不同的内容或页面

• 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。

2，什么时候使用前端路由？

• 在单页面应用，大部分页面结构不变，只改变部分内容的使用

3，前端路由有什么优点和缺点？

• 优点

  • 用户体验好，不需要每次都从服务器全部获取，快速展现给用户

• 缺点

  • 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存

  • 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置

Answer 5

以前路由都是后台做的，通过用户请求的url导航到具体的html页面，前端路由就是通过配置js文件，把这个工作由前端来做，前端路由主要用来替代ajax，可以使页面跳转时不刷新页面且地址栏相应变化，建议你使用angularjs

Answer 6

前端路由里面包括的就是跳转页面的路径

Answer 7

我这有一个现成的前端桌面应用项目

• 代表性的路由设计

• 技术采用 electron+react+redux+webpack

• 通过获取url中的hash来匹配路由

• 项目地址 https://github.com/chunmu/PDD-App

贴上代码

import React from 'react'
import { store } from './redux/store/renderStore'
import { render } from 'react-dom'
import App from './containers/App'
// import Login from './components/Login'
// import TodoHome from './components/TodoHome'
import Welcome from './containers/Welcome'
import List from './containers/List'
import Todo from './containers/Todo'
// import MusicHome from './components/MusicHome'
// import TodoEdit from './components/TodoEdit'
// import TodoDone from './components/TodoDone'
// import TodoDelete from './components/TodoDelete'
// import TodoAdd from './components/ToMy doAdd'
// import TodoDetail from './components/TodoDetail'
// import VideoHome from './components/VedioHome'
// import DiaryHome from './components/DiaryHome'
// import PhotoHome from './components/PhotoHome'
// import Setting from './components/Setting'
// import Introduce from './components/Introduce'
import { Router, Route } from 'react-router'
import { Provider } from 'react-redux'
// import { logger } from './common/log4js'
import './renderProcess/appwin'
// import './common/devtools'
// import { openWelcome } from './common/desktop'
import './style/App.scss'



// setTimeout(() => {
//   openWelcome()
// },10000)


//检测store
// console.log(store.getState())
//路由配置
render(
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} >
        <Route path="/welcome" component={Welcome}/>
        <Route path="/list" component={List}/>
        <Route path="/VideoHome " component={VideoHome }/>
        <Route path="/DiaryHome " component={DiaryHome }/>
        <Route path="/PhotoHome " component={PhotoHome }/>
        <Route path="/TodoDetail " component={TodoDetail }/>
        <Route path="/todo" component={Todo}/>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
)

Answer 8

前端路由是前端都自己的单个view对应的单个url。前端如果有页面的变换，需要用到链接，那么就需要前端路由了。优点是有layout，css，js共用，可以减少重复加载，性能高。缺点是，单页面对于相似度低的组件，特别是最初未采用单页面后来转成单页面，js可能会起冲突。

Answer 9

通俗易懂的讲解了前端路由