动态路由

在路由配置里面，路径后面加 /：值 ，那么路径就会有了参数

例子 ： 　

{
　　name:'home',
　　path:'/home/:abc',
　　component:Home
}

<router-link to="/home/875">Home</router-link>

<router-link to="/home/123">Home</router-link>

那么我在home页面如何得到动态路由的参数呢？ params

<template>
 模板中获取 ：  <div>home {{$route.params.abc}}</div>
</template>

 js中获取 ： 
<script setup>

　　import { useRoute, onBeforeRouteUpdate } from 'vue-router'　

　　

　　//没切换前到 ： 

　　const route = useRoute()

　　console.log(route.params.id)

 

　　//切换左右到 ： 

　　onBeforeRouteUpdate((to, from) => {

　　　　console.log("from:", from.params.id)

　　　　console.log("to:", to.params.id)

　　})

</script>