核心代码

import { useRouter,useRoute } from 'vue-router';
const $router = useRouter()
const $route = useRoute()
const toAbout = () => {
    console.log($router)
    $router.push('/about/888')
}

全部代码

1. 常量路由

   export const constantRoute = [
       {
           path: '/about/:id',
           component:()=> import('../vue-base/about1.vue')
       },
       {
           path: '/',
           component:()=> import('../vue-base/home.vue')
       },
       {
           path: '/about',
           component:()=> import('../vue-base/about.vue')
       },
       { path: '/:pathMatch(.*)*', name: 'NotFound', component: ()=>import('../vue-base/404.vue') },
   
   ]

2. home.vue

   <template>
       <div>
           <h1>我是home</h1>
           <router-link to="/about/123">Go to about1</router-link>
           <br>
           <button @click="toAbout">点我前往About页面</button>
       </div>
   </template>
   
   <script setup lang="ts">
   import { useRouter } from 'vue-router';
   let $router = useRouter()
   const toAbout = () => {
       console.log($router)
       $router.push('/about')
   }
   </script>
   
   <style scoped></style>

3. about.vue

   <template>
       <div>
           <h1>about</h1>
           <router-link to="/home">Go to Home</router-link>
           <br>
           <button @click="toAbout">点我前往About1页面</button>
       </div>
   </template>
   
   <script setup lang="ts">
   import { useRouter,useRoute } from 'vue-router';
   const $router = useRouter()
   const $route = useRoute()
   console.log($route)
   const toAbout = () => {
       console.log($router)
       $router.push('/about/888')
   }
   </script>
   
   <style scoped></style>

4. about1.vue

   <template>
       <div>
           home1
           <br>
           <button @click="toHome">点我也可以前往Home页面</button>
           <h1>{{  params}}</h1>
       </div>
   </template>
   
   <script setup lang="ts">
   import { useRouter,useRoute } from 'vue-router';
   import { ref,computed } from 'vue';
   let params = ref()
   const $router = useRouter()
   const $route = useRoute()
   console.log($route)
   params.value = computed(()=> 
      Number($route.params.id)
   )
   const toHome = () => {
       console.log($router)
       $router.push('/')
   }
   </script>
   
   <style scoped></style>

5. 效果

   1. home

   2. about

   3. about1

   4. 404

       

export const constantRoute = [
    {
        path: '/about/:id',
        component:()=> import('../vue-base/about1.vue')
    },
]

匹配途径

export const constantRoute = [
    { path: '/:pathMatch(.*)*', name: 'NotFound', component: ()=>import('../vue-base/404.vue') },
]

export const constantRoute = [
    {
        path: '/about/:id',
        component:()=> import('../vue-base/about1.vue'),
        redirect:'/about/:id/AboutChildren1',
        children:[
            {
                path:'AboutChildren1',
                component:()=>import('../vue-base/aboutChildren1.vue')
            },
            {
                path:'AboutChildren2',
                component:()=>import('../vue-base/aboutChildren2.vue')
            }
        ]
    }
]

<template>
    <div>
        about1
        <br>
        <button @click="toHome">点我也可以前往Home页面</button>
        <h1>{{  params}}</h1>
        <button @click="toAboutChildren">点我可以前往AboutChildren页面</button>
        <router-view></router-view>
    </div>
</template>

<script setup lang="ts">
import { useRouter,useRoute } from 'vue-router';
import { ref,computed } from 'vue';
let params = ref()
const $router = useRouter()
const $route = useRoute()
console.log($route)
params.value = computed(()=> 
   Number($route.params.id)
)
const toHome = () => {
    console.log($router)
    $router.push('/')
}
const toAboutChildren = ()=>{
    $router.push('/about/8888/AboutChildren1')
}

</script>

<style scoped></style>

<template>
    <div>
        <h1>我是AboutChildren1</h1>
        <br>
        <router-link to="/"></router-link>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

<template>
    <div>
        <h1>我是AboutChildren2</h1>
        <br>
        <router-link to="/"></router-link>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

1. about
2. aboutChildren1
3. aboutChildren2