以上的前提下如果是动态路由的跳转
时间: 2024-03-27 21:37:42 浏览: 6
如果是动态路由的跳转,需要在路由配置中设置动态路由参数,然后在跳转时通过`params`属性传递参数。具体实现方式如下:
首先在路由配置中设置动态路由参数,例如在`/vcom2`路由下添加一个动态参数`:id`:
```js
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{
path: '/',
name: 'VCom1',
component: VCom1
},
{
path: '/vcom2/:id',
name: 'VCom2',
component: VCom2
}
]
});
```
然后在`VCom1`组件中定义一个点击事件,当点击按钮时,通过`params`属性传递动态路由参数并跳转到`VCom2`组件:
```html
<template>
<div>
<button @click="goToVCom2">跳转到VCom2</button>
</div>
</template>
<script>
import { useRouter } from 'vue-router';
export default {
setup() {
const router = useRouter();
const goToVCom2 = () => {
const id = 123; // 传递的参数
router.push({
name: 'VCom2',
params: {
id
}
});
}
return {
goToVCom2
}
}
}
</script>
```
注意,在这里我们使用了路由名称`VCom2`来跳转,而不是直接指定路由路径。这样可以避免在跳转时出现路径拼接错误的问题,同时也增强了代码的可读性。
最后,在`VCom2`组件中使用`route`属性获取动态路由参数,并在视图模板中显示参数:
```html
<template>
<div>
<h2>这是VCom2组件</h2>
<p>路由参数:{{ id }}</p>
</div>
</template>
<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
export default {
setup() {
const route = useRoute();
const id = computed(() => route.params.id);
return {
id
}
}
}
</script>
```
注意,这里使用了`useRoute()`函数获取了当前路由实例,然后通过计算属性`id`获取了动态路由参数并返回。最终在视图模板中使用插值表达式`{{ id }}`显示参数。