Vue Router 笔记

基本使用

路由配置项 （路由数组）

routes: [
  {
    name: 'abc', // 方便导航
    path: '/xxx',
    component: User, // 渲染到 <router-view> 的组件
    redirect: '/abc', // 路由重定向
    alias: '/yyy', // 别名
    children: { ··· }
  },
  {
    path: string,
    component?: Component,
    name?: string, // 命名路由
    components?: { [name: string]: Component }, // 命名视图组件
    redirect?: string | Location | Function,
    props?: boolean | Object | Function,
    alias?: string | Array<string>,
    children?: Array<RouteConfig>, // 嵌套路由
    beforeEnter?: (to: Route, from: Route, next: Function) => void,
    meta?: any,

    // 2.6.0+
    caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
    pathToRegexpOptions?: Object // 编译正则的选项
  }
]

路由懒加载

const SalaryDistribution = () => import('./views/SalaryDistribution.vue')

创建路由

// v3
new VueRouter( config )
// v4
createRouter({
  history: createWebHashHistory(),
  routes: routers
})

$route.query 获取 url 的参数（‘?’后）

通配符（*）路径应该放于最后

v4时， '*'不再建议使用，使用 '/:catchAll(.*)' 替代

导航方式

1. 声明式导航

<router-link to="...">	

2. 编程式导航

$router.push(...)
// window.history.pushState

$router.replace() // 不会向 history 添加新记录
// window.history.replaceState

router.go(n) // 在history中调转指定部属
// window.history.go
// history.forward() history.back()
router.back()

其他内容

命名视图

命名视图 让一个组件中可以同时拥有多个视图

<router-view name="a"></router-view>

对应路由的组件要使用对象语法

components: {
  default: Foo,
  a: Bar
}

动态路由

动态段以冒号开始 /:xxxx/abc/:xxx
它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来

$route.params.xxxx

也可以通过配置路由 props: true 通过 props 获取

$route.params.pathMatch 获取当前路由通配符匹配的内容

动态路由组件更新方法：

使用动态路由参数时，组件实例会被复用，也就不会触发生命周期钩子

1. 可以监听路由变化，做出响应

watch: {
  $route(to, from) {
    // 对路由变化作出响应...
  }
}

2. 或者使用路由守卫 beforeRouteUpdate

嵌套路由

路由被挂载在Vue实例上，模板中的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。
同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>，在 children 属性中配置

path 以 / 开头的嵌套路径会被当作根路径

{
  children: []
}

路由守卫

to
from

通过onError设置取消路由的回调

beforeRouteLeave 组件（写在组件内）

setup中 on前缀

离开from对应的组件
通常用来预防用户在还未保存修改前突然离开

beforeEach 全局前置

false 取消
路由 可定义到其他路由
undifined 或者 true 放行

beforeRouteUpdate 组件

组件被复用时

beforeEnter 路由独享

只在进入路由时触发

beforeRouteEnter 组件

组件生成前 不能访问this
但可以通过 next 进行回调

beforeResolve 全局解析

所有组件内守卫和异步路由组件被解析之后

afterEach 全局后置钩子

不具备守卫功能
可以做分析、更改页面标题、声明页面等辅助功能

beforeRouteEnter

路由封装

// route.js
// v3
import Vue from 'vue'
import Router from 'vue-router' 

Vue.use(Router)

const baseRouters = [
  { // 参考路由配置
  }
]

export default new Router({
 routes: baseRouters
})

// v4
import { createRouter, createWebHashHistory } from 'vue-router'

const baseRouters = ···

export default createRouter({
    history: createWebHashHistory(),
    routes: baseRouters
})

baseRouters 可进一步放到单独文件中

vue 引入

import router from 'route.js'
app.use(router)

组件中

// setup script
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()