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>