vuejs之【router-link】大全(一)

我們在使用vue做單頁面應用難免會用到vue-router，那把項目中的經常用到方法整理一下，方便日后查找與回顧。

1.$route.params

一個 key/value 對象，如果沒有路由參數，就是一個空對象。

格式：path: '/detail/:id' 動態路徑參數 以冒號開頭。

const routes = [
 {path: '/detail/:id', component: Detail, name: 'detail', meta: {title: ''}},
];

一個參數時：

格式： /user/:username

$route.params：{ username: 'evan' }

多個參數時：

格式：/user/:username/post/:post_id

$route.params：{ username: 'evan', post_id: 123 }

復用組件時，可以使用watch監聽$route 對象

watch: {
 '$route' (to, from) {
  // 對路由變化作出響應...
 }
 }

或者用這種方式，只要$route發生變化，就可以做某事：　

watch: {
     // 如果路由有變化，會再次執行該方法
 '    $route': 'doSomeThing'
 },
 methods: {
     doSomeThing(){}
 }

案例

// 當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。
// 可以通過this.$route.params.id來取上動態的id
<router-link :to="{path: '/detail/' + this.$route.params.id}" >
此團詳情
</router-link>
 
// 還可以用命名路由的方式：
<router-link :to="{ name: 'detail', params:{ id: this.$route.params.id }}" >
此團詳情
</router-link>
 
// 還可以用router.push()的方式
router.push({name:'detail', params: { id: this.$route.params.id}})
 
// 以上三種方式都可以實現跳轉，都可以通過this.$route.params來取到參數

2.$route.query

對於路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象。

用法

<router-link :to="{ path: '/backend/verify_coupon', query:this.queryData }">驗證抵扣券</router-link>

3定義路由的時候可以配置 meta 字段

案例：

// 定義路由的時候在meta中加入自定義字段
const routes = [
 {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活動現場'}},
 {path: '/start', component: Start, name: 'start', meta: {isNeedAuth: false, title: '活動現場'}},
];
const router = new VueRouter({...});
router.beforeEach((to, from, next) => {
 // 動態修改頁面的title
 setTitleHack(to.meta.title);
  // 根據自定義的路由元信息來做判斷：
 if (to.meta.isNeedAuth !== false) {
  // do something
 } else {
  // do something
 }
 next();
});

 綜合案例

// 命名路由，append 屬性，查詢參數，router-link渲染成<li>標簽
<router-link tag="li" :to="{name:'demandindex', append:true, query: {isFormBackend: 1}, activeClass: 'bottom-nav-active'}">
</router-link>
 
// to的值：字符串形式
<router-link to="banner.image_url" ></router-link>
 
// to的值：對象形式，拼接多個動態參數
<router-link :to="{path: '/my/modify?modify=fullname&val=' + profile.nickname}" ></router-link>
 
// to的值：對象形式
<router-link :to="{path: '/home'}">返回首頁</router-link>
 
// to的值：對象形式，拼接動態參數
<router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'?order_status='+product.order_status}"></router-link>
 
// to的值：對象形式，帶一個路徑參數
<router-link :to="{path: '/detail/' + this.$route.params.id}" ></router-link>