vue-router 2.0 經常使用基礎知識點之router-link

1，$route.params

類型: Object
一個 key/value 對象，包含了 動態片斷 和 全匹配片斷，若是沒有路由參數，就是一個空對象。
path: '/detail/:id' 動態路徑參數 以冒號開頭

const routes = [
    {path: '/detail/:id', component: Detail, name: 'detail', meta: {title: ''}},
    {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活動現場'}},
];

還能夠在一個路由中設置多段『路徑參數』，對應的值都會設置到 $route.params 中

1個參數

模式： /user/:username
匹配路徑： /user/evan
$route.params：{ username: 'evan' }

多個參數

模式： /user/:username/post/:post_id
匹配路徑：/user/evan/post/123
$route.params：{ username: 'evan', post_id: 123 }

複用組件時，想對路由參數的變化做出響應的話，你能夠簡單地 watch（監測變化） $route 對象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
}

或者像下面這樣，只要$route發生變化，就能夠作某事：

export default {
  data () {
    return {}
  },
  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

類型: Object
一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，若是沒有查詢參數，則是個空對象。

// 動態數據的查詢參數
  export default {
        data() {
            return {
                queryData: {}
            }
        },
        created() {
           this.$http.get(url)
              .then(function (response) {
                   // ...
                   if (data.code == 0) {
                       this.queryData.order_id = data.content.order_id;
                       this.queryData.business_id = data.content.business_id;
                       this.queryData.coupon_id = data.content.coupons.coupon_id;
                    }
                   // ...
              }, function (response) {
                   // ...
              })
        },
    }

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

3，定義路由的時候能夠配置 meta 字段

// 舉個例子
const routes = [
    {path: '/activity', component: Activity, name: 'activity', meta: {isNeedAuth: false, title: '活動現場'}},
];

實際工做中使用的時候就能夠像下面這樣：

import { setTitleHack } from './utils';
import Activity from './views/activity.vue'
import Start from './views/start.vue'
// 定義路由的時候在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();
});

4，append

設置 append 屬性後，則在當前（相對）路徑前添加基路徑。例如，咱們從 /a 導航到一個相對路徑 b，若是沒有配置 append，則路徑爲 /b，若是配了，則爲 /a/b

<router-link :to="{path:'/coupon/detail/'+item.order_id, append:'true'}"></router-link>

若是上面這個路由是從home頁面跳轉過來，獲得的結果就是/home/coupon/detail/id

5，active-class

類型: string
默認值: "router-link-active"
設置 連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。

<router-link tag="li" :to="{path:'/home', activeClass: 'bottom-nav-active'}"></router-link>

7，綜合案例

// 命名路由，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>