vue裡面路由傳參的三種方式
阿新 • • 發佈:2018-12-14
1、方式一
通過query的方式也就是?的方式路徑會顯示傳遞的引數
HTML的方式
<router-link :to="{name:xxx,query:{page:1,code:8899}}"></router-link>
JS的方式
<template> <div> <a @click="routerTo()">query傳參</a> </div> </template> <script> export default { methods: { routerTo() {this.$router.push({ name: `TestVueRouterTo`, query: { page: '1', code: '8989' } }) } } } </script>
接受通過
this.$route.query.page
2、方式二
通過params的方式,路徑不會顯示傳遞的引數
HTML的方式 <router-link :to="{name:xxx,params:{page:1,code:8899}}"></router-link> JS的方式<template> <div> <a @click="routerTo()">query傳參</a> </div> </template> <script> export default { methods: { routerTo() { this.$router.push({ name: `TestVueRouterTo`, params: { page: '1', code: '8989' } }) } } }</script>
接受通過
this.$route.params.page
3、方式三
通過:冒號的的形式傳遞傳參
1、在配置檔案裡以冒號的形式設定引數。我們在/src/router/index.js檔案裡配置路由。
{
- path:'/one/reg/:num',
- component:Reg,
}
<router-link to="/one/log/123"></router-link>
接受通過
this.$route.params.num