vue-router
1. 底层原理 hash 或者h5 histroy(有兼容性)
2. 使用的时候Vue需要引入VueRouter
Vue.use(VueRouter) //VueRouter 底层实际上是instal 安装了两个全局的组件 router-view 和router-link
默认路由：
{
path:'/',
//component:Home //默认页
// redirect:'/home'
redirect:{name:'home'} //也可以起一个名字
}
3. 路由跳转
<li><router-link :to="{path:'/home'}">首页</router-link></li>
<li><router-link :to="{name:'home'}">首页</router-link></li> //name 会有兼容性问题
4. 一个路由想要加载多个组件
① 定义组件的时候采用路由的方式
{
name:'home',
path:'/home',
// component:Home
components:{
default:Home,
comp1:Comp1,
comp2:Comp2
}
② 引入组件Comp1 Comp2
③ 在组件显示的地方 添加 name属性
<router-view name="comp1"></router-view>
<router-view name="comp2"></router-view>
5. 二级路由
{
path:'/user',
component:User,
children:[{
path:'userAdd', //注意这里不要/,/代表根目录
component:UserAdd
},{
path:'userList', //这里也可以这样写 /user/userList
component:UserList
}]
}
6. 路由钩子函数，不同的钩子之间会做什么
全局组件：
beforeEach(to,from,next)：进入新的页面
beforeEnter 进入路由的配置当中
beforeRouteEnter(to,from,next) 单组件进入时
beforeRouteLeave(to,from,next) 单组件离开时
next(vm=>{}) 组件渲染完毕 会调用beforeRouteEnter钩子中 next中的回调函数
beforeResolve(to,from,next) 解析完成
afterEach(to,from,next) 当前进入完毕
7. 跳转页面 声明式跳转/编程式跳转
声明式跳转：<router-link :to="{path:'/home'}">首页</router-link>
编程式跳转 ：this.$router.push("/user/userList");
8. 怎么取得路径的参数
路径传参
?id=1
{{this.$route.query.id}} 通过？路径参数
{{this.$route.params.id}} 通过路由
路由 path:'detail/:id'
<router-link to="user/detail/3">首页</router-link>
9.meta 路由校验用的
在 route.js中添加
meta:{
needLogin:true
}
在路由钩子函数中通过to.matched去获取就能能到
let flag = to.matched.some(match=>match.meta && match.meta.needLogin === true)
可以校验
在路由钩子函数中to.matched 能狗获取到
4.路由懒加载