Vue 路由傳遞引數 3種方法
阿新 • • 發佈:2019-02-12
一、用name傳遞引數
用name傳值並顯示在模板裡:
- 在路由檔案src/router/index.js裡配置name屬性。
1234567 routes: [ { path: '/Message', name: 'Message', component: resolve => require(['../components/page/Message.vue'], resolve) }]
- 在路由檔案src/router/index.js裡配置name屬性。
2.傳值頁面 寫法 :
注意: listInfo 是值的名字, 在接收值的頁面 需要用到
3.接收值的頁面:
二、通過<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傳遞引數
:冒號的形式傳遞引數
在路由配置檔案裡以:冒號的形式傳遞引數,這就是對引數的繫結。
- 在配置檔案裡以冒號的形式設定引數。我們在/src/router/index.js檔案裡配置路由。
1234 { path:'/params/:newsId/:newsTitle', component:Params}
我們需要傳遞引數是新聞ID(newsId)和新聞標題(newsTitle).所以我們在路由配置檔案裡制定了這兩個值。 - 在src/components目錄下建立我們params.vue元件,也可以說是頁面。我們在頁面裡輸出了url傳遞的的新聞ID和新聞標題。
123456789101112131415161718 <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> - 在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元件就沒有辦法接收到。