Vue-router的进阶用法
一、组件懒加载
使用传递import语法会在项目加载时就导入所有组件，导致加载缓慢，使用懒加载可以实习按需加载，提升页面效率。
- () => import(“路径”) //箭头函数+impor()方法
- resolve=>(require([“路径”],resolve)) //异步组件
二、路径重定向
将某一路径重定向到另一路径
{
path:"/",
redirect:'/home'
},
{
path: "/home",
name:"home",
component: () => import("../views/content.vue")
}
//将 / 路径重定向到home组件的路径
三、全局404
将路由不存在的路径都跳转到404组件
{
path: '*',
component: () => import("../views/404.vue"),
}
四、子路由
由于vue是单页面应用，多组件开发，模式，往往单层路由无法完成页面层级与逻辑处理，这个时候就需要用到子路由了。
{
path:"/index",
name:"index",
component:()=>import('../page/index'),
children:[
{path:'a',component:a},
{path:'b',component:b}
]
},
//需要在index 组件中选定一个容器作为路由出口 rouert-view
子路由理论上可以无限嵌套，但嵌套越多逻辑与复杂，一般不建议超过两层。
五、组件保持存活态 keep-alive
在vue中，router-view中的组件在非显示的状态下会被销货以提升页面性能，但是这样会导致组件的频繁渲染，同时输入的数据也会消失，这是不想看到的，所以我们需要保存组件的存活状态。
六、路由前置守备
通过路由前置守备，可以在页面跳转前进行权限判断，登录判断等。
- to 目标路由对象
- from 原路由对象
- next 跳转中间件
router.beforeEach((to,from,next)=>{
//逻辑处理
console.log(to);//输出前往的路由对象
if( 跳转条件 ){
next();//必须调用next方法才会执行下一步
}else{
}
});
路由对象
七、路由默认参数
路由对象可以主动埋藏参数，比如是否 needLogin
//为index路由 添加默认值 needLogin：true
{
path:"/index",
name:"index",
meta:{
needLogin:true
},
component:()=>import('../page/index')
}
//搭配路由前置守备，实现权限判断
router.beforeEach((to,from,next)=>{
if(to.meta.needLogin){//判断前往的路由是否需要登录
alert("needLogin");//提示登录
return next('/login');//重定向到login组件
}
next();//无需登录，放行路由
});
路由对象
八、路由后置守卫
在路由跳转后触发
router.afterEach((to, from) => {
console.log(to, '后置第一个参数')
console.log(from, '后置第二个参数')
/*
to 目标路由
from 源路由
*/
});
九、params与props转化
在传参时，通过params传参需要在目标路由内通过生命周期钩子函数与路由对象去获取会很麻烦，通过props:true,转化参数，从路由传参改变为组件传参
将id 转化为props传参，在 my 组件中通过props接收
十、组件内路由守卫
十一、router的Hash与History模式
两种模式各有利弊，Hash模式会为url增加一个#号标识，History模式则是传统路由模式，
但是在项目中使用history模式可能会引起一些奇怪的问题。
具体的话可以查看官方文档：HTML5 History 模式