版权声明:本文为博主原创文章,转载请注明出处 thx~ https://blog.csdn.net/x550392236/article/details/82761356
一、<router-link :to="...">
to里的值可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query,地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query,地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params,地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
二、router.push(…)方法
同样的规则也适用于router.push(…)方法
// 字符串
router.push('apple')
// 对象
router.push({path:'apple'})
// 命名路由
router.push({name: 'applename'})
//直接路由带查询参数query,地址栏变成 /apple?color=red
router.push({path: 'apple', query: {color: 'red' }})
// 命名路由带查询参数query,地址栏变成/apple?color=red
router.push({name: 'applename', query: {color: 'red' }})
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
router.push({path:'applename', params:{ color: 'red' }})
// 命名路由带路由参数params,地址栏是/apple/red
router.push({name:'applename', params:{ color: 'red' }})
三、注意点
1、 关于带参数的路由总结如下:
无论是直接路由“path" 还是命名路由“name”,带查询参数query,地址栏会变成“/url?查询参数名:查询参数值“;
直接路由“path" 带路由参数params params 不生效;
命名路由“name" 带路由参数params 地址栏保持是“/url/路由参数值”;
2、设置路由map里的path值:
带路由参数params时,路由map里的path应该写成: path:'/apple/:color' ;
带查询参数query时,路由map里的path应该写成: path:'/apple' ;
3、获取参数方法:
在组件中: {{$route.params.color}}
在js里: this.$route.params.color
设置参数
.vue文件
<dl>
<dt>产品及服务</dt>
<router-link tag="dd" :to="{ name: 'Serve', params: { id: '1' }}">平台1</router-link>
<router-link tag="dd" :to="{ name: 'Serve', params: { id: '2' }}">平台2</router-link>
<router-link tag="dd" :to="{ name: 'Serve', params: { id: '3' }}">平台3</router-link>
<router-link tag="dd" :to="{ name: 'Serve', params: { id: '4' }}">平台4</router-link>
</dl>
router/index.js文件
var router = new Router({
routes: [{
path: '/serve/:id?',
name: 'Serve',
component: Serve
}]
获取参数
activated() {
console.log(this.$route.params.id);
}