Vue - 路由傳遞參數

Vue 2.0  路由傳遞參數

Vue 路由傳遞參數 有兩種方式：

1、用name傳遞參數

 

　　兩步完成用name傳值並顯示在模板裏：

1. 在路由文件src/router/index.js裏配置name屬性。
   
    

   1 2 3 4 5 6 7

   routes: [     {       path: '/',       name: 'Hello',       component: Hello     } ]

2. 模板裏(src/App.vue)用$router.name的形勢接收，好比直接在模板中顯示：
   
    

   1	<p>{{ $route.name}}</p>

 

 

2、經過<router-link> 標籤中的to傳參

　　

上邊的傳參或許很不正規，也不方便，其實工做中多數傳參是不用name進行傳參的，咱們用<router-link>標籤中的to屬性進行傳參，須要注意的是這裏的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：

 

1	<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

這裏的to前邊是帶冒號的，而後後邊跟的是一個對象形勢的字符串.

• name：就是咱們在路由配置文件中起的name值。
• params：就是咱們要傳的參數，它也是對象形勢，在對象裏能夠傳遞多個值。

瞭解基本的語法後，咱們改造一下咱們的src/App.vue裏的<router-link>標籤,咱們把hi1頁面的<router-link>進行修改。

 

1	<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi頁面1</router-link>

把src/reouter/index.js文件裏給hi1配置的路由起個name,就叫hi1.

 

1	{path:'/hi1',name:'hi1',component:Hi1},

最後在模板裏(src/components/Hi1.vue)用$route.params.username進行接收.

 

1	{{$route.params.username}}

vue-router 利用url傳遞參數　

　　:冒號的形式傳遞參數

　　　　　　在路由配置文件裏以:冒號的形式傳遞參數，這就是對參數的綁定。

1. 在配置文件裏以冒號的形式設置參數。咱們在/src/router/index.js文件裏配置路由。
   
    

   1 2 3 4

   {     path:'/params/:newsId/:newsTitle',      component:Params }

   
   咱們須要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.因此咱們在路由配置文件裏制定了這兩個值。
2. 在src/components目錄下創建咱們params.vue組件，也能夠說是頁面。咱們在頁面裏輸出了url傳遞的的新聞ID和新聞標題。
   
    

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   <template>     <div>         <h2>{{ msg }}</h2>         <p>新聞ID：{{ $route.params.newsId}}</p>         <p>新聞標題：{{ $route.params.newsTitle}}</p>     </div> </template>   <script> export default {   name: 'params',   data () {     return {       msg: 'params page'     }   } } </script>

    

3. 在App.vue文件里加入咱們的<router-view>標籤。這時候咱們能夠直接利用url傳值了。
   
    

   1	<router-link to="/params/198/jspang website is very good">params</router-link> |

　　正則表達式在URL傳值中的應用

上邊的例子，咱們傳遞了新聞編號，如今需求升級了，咱們但願咱們傳遞的新聞ID只能是數字的形式，這時候咱們就須要在傳遞時有個基本的類型判斷，vue是支持正則的。

加入正則須要在路由配置文件裏（/src/router/index.js）以圓括號的形式加入。

 

1	path:'/params/:newsId(\\d+)/:newsTitle',

加入了正則，咱們再傳遞數字以外的其餘參數，params.vue組件就沒有辦法接收到。