vue-router中传递参数
1.通过设置路由name属性,用{{ $route.name }}
获取。
例如:
设置:
{ path: '/', name: ' Home', component: home }
获取:
<p>$route.name</p>
这里要留意的是:
1.{{$route.name}}
中route的拼写,并不是router。
2.{{$route.name}}
中获取的name值是路由中设置的name值。
2.通过设置router-link中params,用 {{ $route.params }}
获取。
例如1:
设置:
1.路由:
{ path: 'first', name: 'First - 1', component: first1 }
2.router-link:
<li><router-link :to="{name:'First - 1',params:{id:'first'}}">firstfirst</router-link></li>
获取:
<div>first1 获得参数:{{$route.params.id}}</div>
这里要留意的是:
1.router-link中使用的是to的绑定前面要加“:”。
2.目标路由和目标router-link中需要设相同的name。
3.{{$route.name}}
中route的拼写,并不是router。
例如2:
设置:
1.路由:
{ path: '/:id', component: home }
2.router-link:
<li><router-link to="/first">url-params传参</router-link></li>
获取:
{{$route.params.id}}
这里要留意的是:
1.:id
不要忘记了“:”。
2.这里相对于例1不需要在路由中设置name。
3.这里的:id
为first。
4.{{$route.name}}
中route的拼写,并不是router。
3.通过设置router-link中query,用{{ $route.query }}
获取。
例如:
设置:
<li><router-link :to="{path:'/',query:{aaa:123}}">query传参</router-link></li>
获取:
<p>{{$route.query.aaa}}</p>