安装路由
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)=>{})
原文地址：https://www.cnblogs.com/lishixiang-007/p/11337392.html