动态路由基本匹配

很多时候我们需要将给定匹配模式的路由映射到同一个组件：

• 例如，我们可以有一个User组件，它应该对所有用户进行渲染，但是用户的id是不同的
• 再Vue Router中，我们可以再路径中使用一个动态字段来实现，我们称之为路径参数

例子：

{ path: "/user/:id", component: () => import("../User.vue") }

获取动态路由的值

在user中如何获取到对应的值呢？

• 在template中，直接通过$route.params获取值
• 在created中，通过this.$route.params获取值
• 在setup中，我们要使用vue-router库给我们提供的一个hook：useRouter
  • 该hook会返回一个Route对象，对象中保存着当前路由相关的值

例子：

<template>
    <!-- 再模板中获取到id -->
    <h2>UserID:{{ $route.params.id }}</h2>
</template>

<script setup>
import { useRoute } from 'vue-router';

// 获取route跳转id
const route = useRoute()
console.log(route.params.id)

</script>

NotFound页面的匹配和显示

• path: "/:pathMatch(.*)"

index.js

{ path: "/:pathMatch(.*)", component: () => import("../NotFound.vue") }

NotFound.vue

<template>
    <h2>NotFound: 请您输入正确的网址喵（*=^ w ^=*）~</h2>
</template>

• 如果在/:pathMatch(.*)后面又加上了一个*，则会解析网址

函数式路由跳转

• 注意：引入的是router
• 可以使用query

例子：

<button @click="btnClick">点我回到首页</button>

<h4>Info: {{ $route.query.name }} - {{ $route.query.age }}</h4>

<script setup>
  import { useRouter } from 'vue-router';

  const router = useRouter()

  function btnClick() {
    router.push({
      path: "/home",
      query: {
        name: 'Irie',
        age: 19
      }
    })
  }
</script>

动态添加路由

在某些情况下我们可能需要动态的来添加路由：

• 比如根据用户不同的权限，注册不同的路由
• 这个时候我们可以使用一个方法addRoute

例子：

index.js

let isAdmin = true
if (isAdmin) {
    // 添加一级路由
    router.addRoute({
        path: '/admin',
        component: () => import("../Admin.vue")
    })

    // 添加二级路由
    router.addRoute("home", {
        path: "vip",
        component: () => import("../HomeVip.vue")
    })
}

• 在添加二级路由的时候，addRoute的第一个参数是上一级路由设置的独一无二的name