Vue Router学习
title: Vue Router学习
date: 2021-6-7 21:08:18
author: Xilong88
tags: Vue
简单理解和总结：
个人理解：Vue Router是一个插件，可以通过组合组件来组成应用程序，把components添加到routes里面，就可以实现路由的功能。
官方的例子：
Vue Router 官网
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = {
template: 'foo' }
const Bar = {
template: 'bar' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{
path: '/foo', component: Foo },
{
path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
// 现在，应用已经启动了！
这样当我们点击link就可以渲染不同的组件了，这样有一些好处：
1.代码减少了。正常情况下，我应该会新建一个网页，然后让这个网页跳转到这个网页，由此来实现不同页面的路由。但是在有了Vue Router之后，就可以很大程度得复用代码，在这个页面上我们去渲染另一个组件，在链接上显示链接变了，网页也变了，但是实际上还是同一页。这样就能省去很多代码，并且用户体验变好了。
2.性能优化了。我们去重新渲染页面，不仅要发送http请求，还要重新进行整页的DOM加载，这就导致了性能下降，相比于渲染整个页面，Vue Router渲染组件，性能要好。
this.$router可以访问路由器，也可以直接通过router实例的名称来访问，但是相比于在每个组件注入router实例，直接通过this.$router访问耦合更低。
动态路由匹配
路径参数往往不是静态的，是带有一些参数的，这些参数是可能会变化的，所以要用动态路径参数：
const User = {
template: 'User'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
path: '/user/:id', component: User }
]
})
这样，像 /user/foo 和 /user/bar 都将映射到相同的路由，只是参数id不同，通过this.$route.params就可以访问这个参数。
const User = {
template: 'User {
{ $route.params.id }}'
}
所有的路径参数都会放到这里params里面去：
模式 /user/:username/post/:post_id
匹配路径 /user/evan/post/123
$route.params {
username: 'evan', post_id: '123' }
响应路由参数的变化
/user/foo 导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
如果想要路由参数变化做出响应，就应该通过watch去监测$route对象的变化
const User = {
template: '...',
watch: {
$route(to, from) {
// 对路由变化作出响应...
}
}
}
同样可以通过导航守卫来实现，这个后面还会讲。
const User = {
template: '...',
beforeRouteUpdate(to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
导航守卫
捕获所有路由或 404 Not found 路由
{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以 `/user-` 开头的任意路径
path: '/user-*'
}
路由 { path: ‘*’ } 通常用于客户端 404 错误。
当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：
// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'
高级匹配模式
可以使用更高级的匹配方式,path-to-regexp
匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。
嵌套路由
router-view就是用来显示组件的，所以通过嵌套router-view和router，可以嵌套路由：
把子组件放到children属性里面去：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
})
在父组件的模板里面就要加一个router-view
const User = {
template: `
User {
{ $route.params.id }}
这里children的path就不能带‘/’因为这样会被当成根路径。
children里面的routes和外面的routes都是一样的，所以可以多层嵌套。
像上面的例子，访问/user/profile就会有响应，但是访问不存在的子路由，就不行，所以可以加一个空的子路由来响应一些东西：
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 中
{
path: '', component: UserHome }
// ...其他子路由
]
}
]
})
编程式的导航
除了通过点击router-link来导航以外，还可以使用router.push实例方法
router.push(location, onComplete?, onAbort?)
实际上点击router-link之后会调用这个方法，同时history的栈里面会添加一个记录。
// 字符串
router.push('home')
// 对象
router.push({
path: 'home' })
// 命名的路由
router.push({
name: 'user', params: {
userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({
path: 'register', query: {
plan: 'private' }})
如果提供了 path，params 会被忽略， query 并不属于这种情况。需要提供路由的 name 或手写完整的带有参数的 path：
const userId = '123'
router.push({
name: 'user', params: {
userId }}) // -> /user/123
router.push({
path: `/user/${
userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({
path: '/user', params: {
userId }}) // -> /user
也就是说，要么name＋params，要么提供完整的path，自动解析出params，假如带path又带了params，后者无效。query是在path后面去带请求参数。
router-link的to属性也受上述原则限制。
可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort
回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止(导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。在 3.1.0+，可以省略第二个和第三个参数，此时如果支持 Promise，router.push 或 router.replace将返回一个 Promise。
如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 变成 /users/2)，你需要使用beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
相当于router-link 带replace参数：
router.go(n)
可以基于history前进或后退：
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。
这些方法实际上效仿的window.history，所以看起来很像。
命名路由
通过path来使用路由，有时候可能不太方便，所以可以采用name：
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
router.push({
name: 'user', params: {
userId: 123 } })
命名视图
有时候可能有多个组件要渲染到不同的router-view里面，这时候需要给视图命名：
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
这样对应的组件会渲染到对应的视图里面去。
嵌套命名视图
/settings/emails /settings/profile
+-----------------------------------+ +------------------------------+
| UserSettings | | UserSettings |
| +-----+-------------------------+ | | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | |
| | +-------------------------+ | | | +--------------------+ |
| | | | | | | | UserProfilePreview | |
| +-----+-------------------------+ | | +-----+--------------------+ |
+-----------------------------------+ +------------------------------+
Nav 只是一个常规组件。
<!-- UserSettings.vue -->
<div>
<h1>User Settings</h1>
<NavBar/>
<router-view/>
<router-view name="helper"/>
</div>
{
path: '/settings',
// 你也可以在顶级路由就配置命名视图
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
实际上就是表达一个意思，router-view嵌套和命名视图可以同时使用，假如name不匹配，那么相应的router-view不渲染。
重定向和别名
重定向
const router = new VueRouter({
routes: [
{
path: '/a', redirect: '/b' }
]
})
访问/a的时候，会被重定向到/b上去
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{
path: '/a', redirect: {
name: 'foo' }}
]
})
甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{
path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
别名
访问/b和访问/a是完全一样的，相当于/b就是/a的别名，在路径上不会改变，但是实际上就是渲染的/a的组件。
const router = new VueRouter({
routes: [
{
path: '/a', component: A, alias: '/b' }
]
})
路由组件传参
取代与 $route 的耦合
const User = {
template: 'User {
{ $route.params.id }}'
}
const router = new VueRouter({
routes: [{
path: '/user/:id', component: User }]
})
const User = {
props: ['id'],
template: 'User {
{ id }}'
}
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: {
default: User, sidebar: Sidebar },
props: {
default: true, sidebar: false }
}
]
})
如果 props 被设置为 true，route.params 将会被设置为组件属性。
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
const router = new VueRouter({
routes: [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: {
newsletterPopup: false }
}
]
})
函数模式
可以创建一个函数返回 props
const router = new VueRouter({
routes: [
{
path: '/search',
component: SearchUser,
props: route => ({
query: route.query.q })
}
]
})
URL /search?q=vue 会将 {query: ‘vue’} 作为属性传递给 SearchUser 组件
HTML5 History 模式
H5有history.pushState方法进行URL跳转而不重新加载页面，mode调成history：
const router = new VueRouter({
mode: 'history',
routes: [...]
})
这需要配置后台，在讲history对象的时候提到过。
后端配置 略
404
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '*', component: NotFoundComponent }
]
})
进阶
导航守卫
路由元信息
过渡动效
数据获取
滚动行为
路由懒加载
导航故障
简单得看了一下,准备要用的时候再细学。