vue路由细节探讨

1.使用router-link 不会让页面刷新，使用a标签会使页面刷新。
2.router-link 里面的to="/路由地址" tag=""自定义标签" 默认为a标签,linkActiveClass 可以更改默认类名。
3.在 HTML5 history 模式下，router-link 会拦截点击事件，让浏览器不在重新加载页面。
4.当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。
5.传参：
<router-link :to="{ path: 'register', query: { userId: 'xxx' }}">Register</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
6.二级路由和多级路由配置就在当前路由下面配置children:[{path:"xxxx",name:"xxx",component:xxx}]
7.路由全局守卫（路由钩子函数）
router.beforeEach((to,from,next)=>{
console.log("跳转前")
//判断stroe.getter.isLogin ==== false
// if(to.path=="/login" || to.path == "/register"){
next();
// }else{
next("/login")
// }
})
8.路由后置钩子函数
router.afterEach((to,from)=>{
console.log("跳转后")
})

9.路由独享守卫：
就是在配置路由界面加上
router.beforeEach((to,from,next)=>{
console.log("跳转前")
})

10.组件内守卫
进入时候
beforeRouterEnter:(to,from,next)=>{
next(vm=>{
alert("vm.name")
})
离开时候
beforeRouterEnter:(to,from,next)=>{
if(confirm("确定要离开么?") == true){
next()
}else{
next(false)
}
}

巴特西

vue路由细节探讨

最新文章

热门文章