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>