【Vue Router】动态路由匹配

新建项目并改造项目

首先使用vue-cli新建一个项目。

然后对该项目进行改造，改造后的目录如下。

第一种：使用 路由参数 时的路由匹配

• src\App.vue

<template>
  <div id="nav">
    <router-link to="/">首页router-link> |
    <router-link to="/about">关于router-link> | 
    <router-link to="/business/user">面向用户router-link> |
    <router-link to="/business/enterprise">面向企业router-link>
  div>
  <router-view/>
template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
style>

• src\router\index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue';
import About from "../views/About.vue";
import Business from "../views/Business.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/business/:id',
    name: 'Business',
    component: Business
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

• src\views\Business.vue

<template>
    <div v-if="id === 'enterprise'">欢迎来到【面向企业】页面！div>
    <div v-if="id === 'user'">欢迎来到【面向用户】页面！div>
template>

<script>
import {defineComponent,ref} from "vue";
import { useRoute,onBeforeRouteUpdate } from "vue-router";

export default defineComponent({
    name:"Business",
    setup(){
        const route = useRoute();
        const id = ref();
        id.value = route.params.id;
        onBeforeRouteUpdate((route) => {
            id.value = route.params.id
        })
        return {
            id
        }
    }
})

script>

• src\views\About.vue

<template>
  <div class="about">
    <h1>This is an About pageh1>
  div>
template>

• src\views\Home.vue

<template>
  <div class="home">
    <h1>This is an Home pageh1>
  div>
template>

第二种：使用 URL查询参数 时的路由匹配

• src\App.vue

<template>
  <div id="nav">
    <router-link to="/">首页router-link> |
    <router-link to="/about">关于router-link> | 
    <router-link to="/business?id=user">面向用户router-link> |
    <router-link to="/business?id=enterprise">面向企业router-link>
  div>
  <router-view/>
template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
style>

• src\router\index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue';
import About from "../views/About.vue";
import Business from "../views/Business.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/business',
    name: 'Business',
    component: Business
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

• src\views\Business.vue

<template>
    <div v-if="id === 'enterprise'">欢迎来到【面向企业】页面！div>
    <div v-if="id === 'user'">欢迎来到【面向用户】页面！div>
template>

<script>
import {defineComponent,ref} from "vue";
import { useRoute,onBeforeRouteUpdate } from "vue-router";

export default defineComponent({
    name:"Business",
    setup(){
        const route = useRoute();
        const id = ref();
        id.value = route.query.id;
        onBeforeRouteUpdate((route) => {
            id.value = route.query.id
        })
        return {
            id
        }
    }
})

script>

• src\views\About.vue

<template>
  <div class="about">
    <h1>This is an About pageh1>
  div>
template>

• src\views\Home.vue

<template>
  <div class="home">
    <h1>This is an Home pageh1>
  div>
template>

但是，使用查询字符串时，会有这样一个问题：

至于，怎么解决这个问题，我暂时没有答案，望网友指点。

参考文档

带参数的动态路由匹配
onBeforeRouteUpdate
Vue Router 和 组合式 API