# 基本介绍
传统的页面通过超链接实现页面的切换和跳转,在vue中是通过路径上切换实现组件切换,因为vue是单页面应用,只有一个index.html页面切换都是用vue-router来实现
# 安装
如果用的vue-cli搭建项目,搭建时可以配置安装,如果安装后可以忽略这一步
安装命令: npm i vue-router
# router组件
# router-link
声明式跳转,可以通过点击实现路由跳转
属性:
to 跳转的路由路径
tag 渲染页面上的标签 (div button 等...配置什么页面上显示什么标签)
replace 点击会调用router.replace() 而不是 router.push(),导航后不会留下 history 记录。
append在原来的路径上添加器路径如:我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
active-class 定义class名,这里不是class定义而是使用active-class
# router-view
用来显示路由组件,必须定义,要不你配置的路由在哪里显示? 一般放在路由的根组件上,例如:app.vue中
# 获取路由
# 完整路由 this.$router
可以访问路由所有挂载的实例 (opens new window)
# 当前路由 this.$route
访问当前路由挂载的实例路由对象
# 路由跳转
- 声明式跳转
- 逻辑跳转
this.$router.push()
- 有历史记录
- 可以通过history.go(-1)返回上一个页面
this.$router.replace()
- 没有历史记录
# 路由传参
- 第一种
- this.$router({path:'路径',query:{}})
- 第二种
- this.$router({name:'路径',params:{}})
query参数需要path作为跳转条件,params需要name作为跳转条件
# 动态路由
在路由表中配置path时再结尾加上/:
{
path: '/tab/:id',
name: 'tab',
component: Tab
}
可以通过/tab/任意
访问该组件
# 重定向
重定向通过 routes 配置来完成,下面例子是从 /a 重定向到 /b
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
# 路由守卫
类似生命周期,路由状态发生变换时候会触发对应的钩子 也可以叫路由拦截,好比有个保安在看门,你有权限就可以进入房子,没有权限就被拒之门外
# 全局守卫
# beforeEach
在路由跳转前触发,参数包括to,from,next 参数
- to 将要进入离开的路由
- from 来自哪个页面
- next 通过,决定是否展示你要看到的路由页面
# afterEach
路由跳转完成后触发,在beforeEach之后局部守卫之前 参数
- to 将要访问的路径
- from 代表从哪个路径跳转而来
- next 通过,决定是否展示你要看到的路由页面
# 路由独享
单个路由配置的时候也可以设置的钩子函数,只有一个钩子函数beforeEnter。
先执行完beforEach
后再触发beforEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
# 组件守卫
跟生命周期差不多,相当于像组件中添加生命周期钩子函数
# beforeRouteEnter
路由进入之前调用,该守卫内访问不到组件的实例,需要传递一个回调给next才可以访问
beforeRouteEnter (to, from, next) {
// 这里还无法访问到组件实例,this === undefined
next( vm => {
// 通过 `vm` 访问组件实例
})
}
# beforeRouteUpdate
在当前路由改变时,并且该组件被复用时调用。可以访问this实例
例如:带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,组件实例会被复用
# beforeRouteLeave
导航离开该组件的对应路由时调用,可以访问组件实例this,参数包括to,from,next。