Vue-router的三种传参方式

第一种传递参数：name传参

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

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

Vue代码 

routes: [  

    {  

      path: '/',  

      name: 'HelloWorld',  

      component: HelloWorld  

    },  

]

 第二步在src/App.vue接收

 

 

{{ $route.name }}

 

 

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

 

第二种参数传递方式 通过标签中的to传递

首先在src/App.vue中添加

 

"{name:'hello',params:{userName:'冬天'}}">hello

 

 然后在router/index.js中添加name

 

Vue代码 

{  

      path: '/hello',  

      name: 'hello',  

      component: hello,  

      alias: '/dongtian' //别名  

    },   

 最后在hello.vue页面接收

 

 

Vue代码 

{{ $route.params.userName}}

  

 

 

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

 

第三种 利用rul传递参数

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

 

Vue代码 

{  

      path: '/params/:Id(\\d+)/:title', //只能是数字  

      component: params  

}  

 

然后在params模块利用$route接收参数

Id: {{ $route.params.Id}}
title: {{ $route.params.title}}

 

最后在src/App.vue模块中的 标签中利用rul传值

params

转载于:https://www.cnblogs.com/webPang/p/8526828.html