1、定义路由
在工程文件router\index.js中定义路由如下：
import { createRouter, createWebHashHistory } from "vue-router";
const routes = [
{
path: '/caseinfoeditor/:caseId',
component: () => import('../views/system/caseinfoeditor.vue')
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
其中:caseId是定义路由参数的占位符。
2、在组件中获取路由参数的方法
<script setup name="Welcome">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
const $router = useRouter();
onMounted(() => {
console.log('$router:', $router.currentRoute.value.params.caseId);
});
</script>
注意这里使用了vue3的setup语法糖。如果是非vue3 setup语法糖，useRouter和useRoute函数不能在setup里面的函数体内部执行，要放在顶部或者其他位置，不然作用域改变，执行后的router/route是 undefined。
