vue-router 基础学习

Vue Router | Vue.js 的官方路由

安装

1
npm install vue-router@4

快速开始

  1. 新建路由实例并配置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    import { createRouter, createWebHashHistory } from 'vue-router'
    // 定义一些路由 每个路由都需要映射到一个组件
    const routes = [
      {
        path: '/',
        name: 'default',
        redirect: '/login',
      },
      {
        path: '/login',
        name: 'login',
        meta: {
          name: '登录',
        },
        component: () => import('@views/login.vue'),
      },
      {
        path: '/index/:id',
        name: 'index',
        meta: {
          name: '主页',
        },
        component: () => import('@/views/index.vue'),
      },
    ]
    // 创建路由实例并传递 `routes` 配置
    const router = createRouter({
      history: createWebHashHistory(),
      routes //`routes: routes` 的缩写
    })

    export default router

  2. 创建并挂载到根实例

    1
    2
    3
    4
    const app = Vue.createApp({})
    //整个应用支持路由。
    app.use(router)
    app.mount('#app')

动态路由匹配

路由中设置一个或多个路径参数，路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来

1
2
3
4
5
6
7
8
{
    path: '/index/:id',
    name: 'index',
    meta: {
      name: '主页',
    },
    component: () => import('@/views/index.vue'),
  },

同一路由设置多个路径参数的匹配规则

匹配模式 匹配路径 $route.params
/users/:username /users/eduardo { username: 'eduardo' }
/users/:username/posts/:postId /users/eduardo/posts/123 { username: 'eduardo', postId: '123' }

路由里配置了路径参数，但是访问时没带上时，会找不到路由

带参的路由使用时，用户从/index/1 导航到 /index/2 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用

要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

1
2
3
4
5
6
7
8
9
watch: {
   '$route.params': {
     handler(v) {
       console.log('路由参数更新：' ,v)
       console.log('重新去获取该路由的数据')
     },
   },

 }

或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航：

1
2
3
4
5
6
const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
  },
}

路由匹配语法

路由的path中可以自定义正则来匹配

如果需要一个参数匹配多个部分路由，