Vue配置路由和传参方式及路由守卫！

Posted 2022-07-02 lishixiang-007

安装路由
npm i vue-router -S

引入路由
import VueRouter form VueRouter

注入路由模块
Vue.use(VueRouter)

定义路由匹配规则
let routes = [
...,
...
]

上列匹配规则中 对象有如下属性
path : 路由路径
component : 所加载的组件
name : 别名
redirect : 重定向
children : 子级路由

创建路由实例
let router = new VueRouter(
routes : routes //routes属性值应该为上述路由匹配规则数组
)

将路由实例注入到初始化代码中

let app = new Vue(
data:...,
router : router
)

跳转:
标签跳转
<router-link to="" ></router-link>
该标签拥有属性
to : 目标路径 也可以是对象
tag: 指定该标签解析成实际的标签类型
activeClass: 指定选中时的class名

js跳转(编程式导航)
在组件内:
this.$router.push()
this.$router.replace()
this.$router.go() 前进或者后退 正前负退

路由传参
传统search传参(?号传参)
传送数据
标签传参
<router-link :to="name:‘...‘,query:data"></router-link>
编程传参
this.$router.push(
name : "...",
query : data
)
接收数据
this.$route.query

路径传参(动态路由)
路由配置:
path:"/detail/:id",component:....
传送数据:
<router-link :to="name:‘...‘,params:data">
编程传参:
this.$router.push(name:‘...‘,params:data)

接收参数
this.$route.params

路由守卫(导航守卫)
路由的钩子函数

三大类
全局
决定跳转前
router.beforeEach((to,from,next)=>)
to代表目标路径对象
from代表来源路径对象
next() 是否继续 参数有三种
true或者不传 代表允许跳转
false 代表中止跳转
填入路径 会重定向到指定路径

决定跳转后但还没有跳转时 此时无法阻止路由跳转
router.afterEach((to,from)=>)

路由独享
path:"....",beforeEnter((to,from,next)=>)

组件守卫
进入当前组件前
beforeRouteEnter((to,from,next)=>)
离开当前组件前
beforeRouteLeave((to,from,next)=>)

路径没有变化但是参数变化时(多用于监听单纯的参数变化)
beforeRouteUpdate((to,from,next)=>)