写在前面
? ? ? ? 朋友们好呀，今天接着讲Vue-router。是简略的面试简答版。
Vue-router有哪几种路由守卫？
? ? ? ? 1.全局前置守卫：beforeEach
? ? ? ? 2.全局后置守卫：afterEach
? ? ? ? 3.全局解析守卫：beforeResolve
? ? ? ? 4.路由独享守卫：beforeEnter
? ? ? ? 关于导航守卫的详情可详见vue-router的官方网站。网址贴在下边啦，多多逛逛官网会对学习vue有很大帮助嗷。
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB
路由传值的方式有哪几种?
? ? ? ? Vue-router传参可以分为两大类，分别是编程式导航router.push和声明式的导航
? ? ? ? 1.router.push
? ? ? ? ? ? ? ? 1.1字符串：直接传递路由地址，但是不能传递参数
this.$router.push("home")
? ? ? ? ? ? ? ? 1.2命名路由：这种方式传递参数，目标页面刷新会报错
this.$router.push({name:"news",params:{userId:123}})
? ? ? ? ? ? ? ? 1.3查询参数：和name配对的是params，和path配对的是query
this.$router.push({path:"/news",query:{userId:123}})
? ? ? ? ? ? ? ? 1.4接收参数
this.$router.query
? ? ? ? 2.声明式导航
? ? ? ? ? ? ? ? 2.1字符串
<router-link to:"news"></router-link>
? ? ? ? ? ? ? ? 2.2命名路由
<router-link :to:"{name:'news',params:{userid:1111}}"></router-link>
? ? ? ? ? ? ? ? 2.3查询参数
<router-link :to="{path:'/news',query:{userId:1111}}"></router-link>
写在最后
? ? ? ? 明天见。
|