Vue-router的三种传参方式
第一种传递参数:name传参
两步完成name传参并显示在模板中;
第一在router/index.js中配置name属性,
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
]
第二步在src/App.vue接收
- {{ $route.name }}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第二种参数传递方式 通过<router-link>标签中的to传递
首先在src/App.vue中添加
- <router-link :to="{name:'hello',params:{userName:'冬天'}}">hello</router-link>
然后在router/index.js中添加name
{
path: '/hello',
name: 'hello',
component: hello,
alias: '/dongtian' //别名
},
最后在hello.vue页面接收
<h2>{{ $route.params.userName}}</h2>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
第三种 利用rul传递参数
首先在router/index.js路由中以冒号的形式传递参数,配置路由如下
{
path: '/params/:Id(\\d+)/:title', //只能是数字
component: params
}
然后在params模块利用$route接收参数
- <p>Id: {{ $route.params.Id}}</p>
- <p>title: {{ $route.params.title}}</p>
最后在src/App.vue模块中的 <router-link>标签中利用rul传值
<router-link to="/params/189/tianshi">params</router-link>