Vue-router的三种传参方式

第一种传递参数：name传参

两步完成name传参并显示在模板中；

第一在router/index.js中配置name属性，

Vue代码 

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

 

Vue代码 

{  

      path: '/hello',  

      name: 'hello',  

      component: hello,  

      alias: '/dongtian' //别名  

    },   

 最后在hello.vue页面接收

 

 

Vue代码 

<h2>{{ $route.params.userName}}</h2>  

 

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

第三种 利用rul传递参数

首先在router/index.js路由中以冒号的形式传递参数，配置路由以下

 

Vue代码 

{  

      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>