动态路由匹配

带参数的动态路由匹配

场景：不同的用户定位导同一个组件，且需要在路由中提现用户的id
如 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

此时我们注册路由时，在对应如有的后面添加:后面跟一个参数userID

代码演练

    // **代码来自vue-router4文档**
    const User = {
      template: '<div>User ({{$route.params.id}})</div>',
    }

    // 这些都会传递给 `createRouter`
    const routes = [
      // 动态字段以冒号开始
      { path: '/users/:id', component: User },
    ]

    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
      // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
      history: VueRouter.createWebHashHistory(),
      routes, // `routes: routes` 的缩写
    })

    // 5. 创建并挂载根实例
    const app = Vue.createApp({})
    //确保 _use_ 路由实例使
    //整个应用支持路由。
    app.use(router)

    app.mount('#app')

限制

添加了动态路由匹配，在跳转该路由是，必须携带该参数，否则路由跳转失败，找不到页面

借用上面例子进行路由跳转
this.$router.push('/users/123') // 跳转成功
this.$router.push('/users') // 不带参数,跳转失败

<router-link :to="/users/123"></router-link> // 跳转成功
<router-link :to="/users/123"></router-link> // 不带参数,跳转失

监听路由的变化

场景

// 下面两个跳转会调到同一个页面，相同的组件实例将被重复使用。
<router-link :to="user/zhangshan"></router-link>
<router-link :to="user/lishi"></router-link>

// 验证
<template>{{$route.params.id}}</template>
<script setup>
// 省略引用部分
onMounted(() => {
  console.log('我被加载了'); // 只有第一次加载时更新了
})
onUpdated(() => {
  console.log('我被更新了'); // 每一次路由跳转都发生了更新
})
</script>

路由监听

因为同一个组件，vue组件不会多次加载，所以我们监听路由变化时，可以在watch()中监听route.params.id值的变化

watch(() => route.params.id, (newroute, oldroute) => {
  console.log(newroute, oldroute);
  // todo...
})

匹配404错误页

 // vue官方文档给了一种匹配方案
 const router = createRouter({
 history: createWebHistory(), // history模式
 routes: [
   {
     path: "/",
     name: "home",
     component: () => import("../view/Home.vue"),
     children: [
       {// 匹配id
         path: "/router/:id",
         name: "router",
         component: () => import("../view/Router.vue"),
       },
     ],
   },
   // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
   {
     path: "/:pathMatch(.*)*",
     name: "NotFound",
     component: () => import("../view/NotFound.vue"),
   },
   // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
   { path: "/user-:afterUser(.*)", component: () => import("../view/UserGeneric.vue") },
 ],
});