核心代码

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