以上使用setup语法糖,同时使用params进行路由跳转传参
时间: 2023-07-11 19:52:49 浏览: 59
好的,使用`setup`语法糖的具体实现方式如下:
首先,在`router/index.js`中添加路由配置,设置`VCom2`组件的路由路径为`/vcom2/:id`,其中`:id`表示路由参数:
```js
import { createRouter, createWebHistory } from 'vue-router';
import VCom1 from '../views/VCom1.vue';
import VCom2 from '../views/VCom2.vue';
const routes = [
{
path: '/',
name: 'VCom1',
component: VCom1
},
{
path: '/vcom2/:id',
name: 'VCom2',
component: VCom2
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
```
接下来,在`VCom1`组件中定义一个点击事件,当点击按钮时,使用`$router.push()`方法跳转到`VCom2`组件,并通过`params`属性传递参数:
```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>
```
注意,这里使用了`useRouter()`函数获取了`router`实例,然后使用`push()`方法跳转到`VCom2`组件,同时通过`params`属性传递了参数`id`。
最后,在`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`并返回。最终在视图模板中使用插值表达式`{{ id }}`显示参数。