序言：前不久做了一个面试，问（vue中你是怎么做路由管理的？），因为本身对Vue有关八股文的地方，并没仔细看，答的时候脑子老是禁不住往动态路由那块想，哈哈。。。所以还是跑来记录一下吧，毕竟好记性不如烂笔头！！！（本篇纯八股文。）
1、Vue中使用vue-router管理路由
Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
-
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式，在 IE9 中自动降级
- 自定义的滚动条行为
ps：摘自官方文档
1.1 安装
（1）可以使用script标签进行全局安装
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>（2）也可以使用npm的方式进行安装，需要声明 Vue.use(...)
//npm方式安装
npm install vue-router
//在main.js中 导入vue项目中
import Vue from 'vue'
import VueRouter from 'vue-router'
//通过 Vue.use() 明确地安装路由功能
Vue.use(VueRouter)1.2 创建router实例
可以用new VueRouter(options)创建并导出一个router实例，来管理Vue项目中的路由，参数是路由的配置参数。配置参数中最重要的是routes,它是一个数组，用来设置一组url与组件的对应关系，数组中的成员称为一条路由。
const routes = [
//一条路由
{
path: '/',
name: 'default',
redirect: '/login',
component: resolve => require(['@/views/login/login.vue'], resolve),
},
]
const vueRouter = new Router({
mode: 'history', //设置成history模式，不带#号
routes
})
export default vueRouter1.3 在vue实例中引入Router实例
在全局main.js文件中写入Vue实例，里面引入router实例。
//router 导入全局配置文件
import router from './router'
//在全局配置文件内，创建Vue实例
try {
new Vue({
el: '#app',
router,
components: {
App
},
template: '<App/>'
})
} catch (e) {}1.4、渲染路由匹配的组件
在模板中使用<router-view> 组件用来渲染通过路由映射过来的组件，通常在app.vue中使用。
2、Vue动态路由加载
适用场景：仪表盘项目中，系统根据登录账号的权限，动态加载左侧菜单，由后端直接返回的路由菜单数据，以及对于某一功能模块的入口权限的判断，对某一模块是由拥有访问权限。
思路：概括一下就是将路由配置分为两部分，一部分用户路由（根据用户权限生成的路由），一部分公共路由（比如说：404，500这些报错页面以及login登录页等）。
以登录场景为例：
1、首先在vue-router对象中初始化公共路由（404、login页面）；
2、在用户进行登陆时，调用登录接口拿到该用户信息（先不返给前端，根据信息取出对应的menuList），后台根据用户信息取得对应的权限菜单menuList；
3、前端将后台返回的menuList转换成我们需要的router数据结构；
4、通过vue-router2.2新添的router.addRouter(routes)方法，也可以可以将转后的路由信息保存于vuex，这样我们就可以取出路由信息并且渲染我们的左侧菜单，实现动态路由。
附一份简单的代码吧：
ps：网上的有关动态路由加载真的超级多，此代码仅作理解用。。。
router.beforeEach(({ meta, path }, from, next) => {
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。l
let auth = meta.auth
let isLogin = store.state.user.isLogin
console.log(meta, isLogin);
console.log("SSPT---->store===",store);
if (auth && !isLogin) {
next({
path: '/login',
query: { redirect: path === '/login' ? null : path }
})
} else {
next()
}
if (path === '/login' && isLogin) {
router.push({ path: '/index' })
}
})
结语：
在日常开发学习中，真真的建议大家去看官方文档，学到的能全一点，细致一点，程序员需要具备阅读文档的能力，很重要的！！顺便吐槽一下现在的博客，真的都是好看的皮囊。。。有时候别人总结的还不如自己悟出来的呢（小白除外哈），当然，本博文只是为了我加深记忆做的，这么多是不是有点矛盾啊，不管了，哈哈哈，我溜~~~