1 query传参
<router-link :to="{ path: '/test', query: { id: 1 } }">
<el-button link class="tableOptBtn" type="primary" size="small">
查看</el-button>
</router-link>
== 成功跳转链接为 localhost:3000/#/test?id=1==
获取路由参数
const route = useRoute()
console.log(route.query.id)
2 params传参
前提test组件路由配置path为 “/test/:id?”,=
<router-link :to="{ name: 'test', params: { id: 1} }">
<el-button link class="tableOptBtn" type="primary" size="small">
查看</el-button>
</router-link>
== 成功跳转链接为 localhost:3000/#/test/1==
获取路由参数
import { useRoute } from “vue-router”;
const route = useRoute()
console.log(route.params.id)
总结在vue里第一种传参如果再进入不带传参的同一页面界面不会刷新,刚才界面有的数据还在。第二种方式则不会