Vue Router
Vue Router
是 Vue.js
官方的路由管理器。
Vue Router是什么
Vue Router
是一个SPA的路径管理器,它和 Vue.js
的核心深度集成,适合用于构建单页面应用。Vue的单页面应用是基于路由与组件,路由用于访问路径,将路径跟组件映射起来。其本质是组件之间的切换,建立一个url跟页面之间的映射关系。
Vue Router的两种模式
通过配置mode选项来指定哪种模式,默认是使用hash模式
new Router({
mode: 'history'
})
复制代码
- Hash
- hash(#)是URL的锚点,代表网页中的一个位置,通过改变
#
后面的部分,页面不会重新加载,会触发hashChange
事件,通过监听该事件,获取hash值,再渲染不一样的页面,同时会给浏览器的访问历史加入一个纪录,可以使用后退前进。
- hash(#)是URL的锚点,代表网页中的一个位置,通过改变
- History
- History模式是通过HTML5的History对象来实现的,url看起来就像普通网站一样,通过
/
分割,但是页面没有跳转,但是这种模式需要服务端的支持,服务端接收到所有请求,都指向同一个html文件,不然会出现404。如果服务端支持后,服务端将不会返回404错误。
- History模式是通过HTML5的History对象来实现的,url看起来就像普通网站一样,通过
动态路由匹配
一个或者多个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。
import demo1 from '@/views/demo1'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
// 动态路径参数 以冒号开头
path: '/demo1/:id',
name: 'demo1',
component: demo1
}
]
})
复制代码
模式 | 匹配路径 | $route.params |
---|---|---|
/demo1/:id | /demo1/1 | { id: 1 } |
/demo1/:id/name/:name | /demo1/1/name/xy | { id: 1, name: 'xy' } |
响应路由参数的变化
当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。 复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch
(监测变化) $route
对象
//vue实例中
watch:{
'$route':function(to,from){
console.log('watch-$route');
console.log(to);
console.log(from);
}
},
复制代码
或者使用 beforeRouteUpdate
导航守卫
//vue实例中
beforeRouteUpdate (to, from, next) {
// ...
console.log('beforeRouteUpdate');
console.log(to);
console.log(from);
},
复制代码
匹配优先级
同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
嵌套路由
嵌套路由,为了实现下图的结构,先在app.vue中放置一个顶层的router-view
,然后在demo5中放置一个嵌套的router-view
,在路由设置中给VueRouter
的参数中使用children
配置。
要注意,以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
// 参考 https://router.vuejs.org/zh/guide/essentials/nested-routes.html
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
// index.js
import Vue from 'vue'
import Router from 'vue-router'
import demo5 from '@/views/demo5'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/demo5/:id',
name: 'demo5',
component: demo5,
children:[
{
path: 'com1',
name: 'com1',
component: {
template: '<div>com1</div>'
}
},
{
path: 'com2/:comId',
name: 'com2',
component: {
template: '<div>com2 {{ $route.params.comId }}</div>'
}
}
]
}
]
})
复制代码
<!--app.vue-->
<template>
<div id="app">
<router-link to='/demo5/1/com1'>demo5/1/com1</router-link>
<router-link to='/demo5/1/com2/2'>demo5/1/com2/2</router-link>
<router-view/>
</div>
</template>
<!--demo5.vue-->
<template>
<div>
<h2>{{$route.params.id}}</h2>
<router-view></router-view>
</div>
</template>
复制代码
编程式导航
除了可以使用 <router-link>
创建 a 标签来定义导航链接,还可以通过调用router的实例方法,通过编写代码来实现跳转
router.push(location, onComplete?, onAbort?)
- location 可以是一个字符串路径,也可以是一个描述地址的对象
- onComplete 跳转成功之后的回调
- onAbort 中止回调
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 复制代码
router.replace(location, onComplete?, onAbort?)
- 与上面的方法跳转方式一致,区别是它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
- 这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步
命名路由
通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。
命名视图
命名视图是指在同级页面中展示多个视图,而不是嵌套展示。
// index.js
new Router({
routes: [
{
path: '/demo6',
name: 'demo6',
components: {
default:demo6,
a:demo3,
b:demo2
}
}
]
})
复制代码
<!--app.vue-->
<template>
<div id="app">
<router-view ></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>
</template>
复制代码
嵌套命名视图
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+
复制代码
// index.js
new Router({
routes: [
{
path: '/demo7',
name: 'demo7',
component:demo7,
children:[
{
path: 'a',
component: {
template: '<div>a</div>'
}
},
{
path: 'b',
components: {
default: {
template: '<div>default</div>'
},
b: {
template: '<div>b</div>'
}
}
}
],
}
]
})
复制代码
<!--demo7.vue-->
<template>
<div>
<h2>demo7</h2>
<router-view></router-view>
<router-view name='b'></router-view>
</div>
</template>
复制代码
重定向和别名
- 重定向是通过 routes 配置 redirect 来完成。当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,
{
path: '/demo4/:id',
name: 'demo4',
component: demo4,
redirect:to=>{
console.log(to);
return '/demo1/' + to.params.id
}
}
复制代码
- 别名是是通过 routes 配置 alias 来完成/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
{
path: '/demo3',
name: 'demo3',
component: demo3,
alias:'/demo2'
}
复制代码
路由组件传参
- 布尔模式 为了避免在组件中多次使用
$route
,使之与其对应路由形成高度耦合,可以通过设置组件的props
进行解耦
{
path: '/demo1/:id',
name: 'demo1',
component: demo1,
props:true
}
复制代码
- 对象模式 如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。
{
path: '/demo2',
name: 'demo2',
component: demo2,
props:{
path:'demo2'
}
},
复制代码
- 函数模式 你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
{
path: '/demo1/:id',
name: 'demo1',
component: demo1,
props:(route)=>{
return {
fId:"f"+route.params.id
}
}
}
复制代码
导航守卫
路由正在发生改变,vue-router
提供了导航守卫来通过跳转或取消的方式守卫导航,有多种植入导航钩子。 守卫方法 接收三个参数
-
to: Route: 即将要进入的目标 路由对象
-
from: Route: 当前导航正要离开的路由
-
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法,否则钩子就不会被 resolved。
- 全局守卫
router.beforeEach
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
router.beforeEach((to,from,next)=>{ console.log(to); console.log(from); next() }) 复制代码
- 全局解析守卫
router.beforeResolve
在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
router.beforeResolve((to,from,next)=>{ console.log(to); console.log(from); next() }) 复制代码
- 全局后置钩子
router.afterEach
导航跳转之后调用,不会接受 next 函数也不会改变导航本身
router.afterEach((to,from)=>{ window.scrollTo(0,0) }) 复制代码
- 路由独享守卫
- 你可以在路由配置上直接定义
beforeEnter
守卫
{ path: '/demo1/:id', name: 'demo1', component: demo1, beforeEnter: (to, from, next) => { console.log('beforeEnter'); next() } } 复制代码
- 你可以在路由配置上直接定义
- 组件内守卫 路由组件内直接定义以下路由导航守卫
- beforeRouteEnter 守卫 不能 访问
this
,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。 - beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用
- beforeRouteLeave 这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 console.log('beforeRouteEnter'); console.log(this); next(vm=>{ console.log('vm'); console.log(vm); }) }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` // ... console.log('beforeRouteUpdate'); console.log(this.id); console.log(to); console.log(from); next() }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console.log('beforeRouteLeave'); console.log(this); next() }, 复制代码
- beforeRouteEnter 守卫 不能 访问
完整的导航解析流程
路由元信息
定义路由的时候可以配置 meta 字段
{
path: '/demo5/:id',
name: 'demo5',
component: demo5,
meta:{
title:'demo5'
},
children:[
{
path: 'com1',
name: 'com1',
component: {
template: '<div>com1</div>'
},
meta:{
title:'demo5-com1'
},
}
]
}
//通过 .meta访问
复制代码
过渡动效
直接使用Vue过渡组件,如果需要每个路由不一样的过度效果,可以通过在路由组件使用transition
并设置不一样的name值。 基于路由的动态过渡,可以在父组件中监听 $route
<transition :name='transitionName'>
<router-view></router-view>
</transition>
复制代码
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
复制代码
滚动行为
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
console.log(savedPosition);
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
复制代码
异步滚动可以通过返回一个Promise
,一般用于配合过渡效果。
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
return new Promise((resolve,reject)=>{
this.timeout = setTimeout(() => {
let obj = savedPosition ? savedPosition : { x: 0, y: 0 }
clearTimeout(this.timeout)
resolve(obj)
}, 500);
})
}
复制代码
路由懒加载
当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
首先,可以将异步组件定义为返回一个 Promise 的工厂函数 const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
Vue Router跳转方式
- 直接修改url参数
- 声明式跳转:在页面中写
<router-link to='/index'>index</router-link>
- 编程式跳转:在Vue实例内部调用
$router.push(location, onComplete?, onAbort?)