這篇文章給大家分享的是有關(guān)vue-router 2.0 常用基礎(chǔ)知識點(diǎn)之router-link的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

樂安ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

1，$route.params

類型: Object

一個 key/value 對象，包含了 動態(tài)片段 和 全匹配片段，如果沒有路由參數(shù)，就是一個空對象。

path: '/detail/:id' 動態(tài)路徑參數(shù) 以冒號開頭

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

還可以在一個路由中設(shè)置多段『路徑參數(shù)』，對應(yīng)的值都會設(shè)置到 $route.params 中

1個參數(shù)

模式： /user/:username

匹配路徑： /user/evan

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

多個參數(shù)

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

匹配路徑：/user/evan/post/123

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

復(fù)用組件時，想對路由參數(shù)的變化作出響應(yīng)的話，你可以簡單地 watch（監(jiān)測變化） $route 對象：

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

或者像下面這樣，只要$route發(fā)生變化，就可以做某事：

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

綜合案例

// 當(dāng)匹配到一個路由時，參數(shù)值會被設(shè)置到 this.$route.params，可以在每個組件內(nèi)使用。
// 可以通過this.$route.params.id來取上動態(tài)的id
<router-link :to="{path: '/detail/' + this.$route.params.id}" >
此團(tuán)詳情
</router-link>

// 還可以用命名路由的方式：
<router-link :to="{ name: 'detail', params:{ id: this.$route.params.id }}" >
此團(tuán)詳情
</router-link>

// 還可以用router.push()的方式
router.push({name:'detail', params: { id: this.$route.params.id}})

// 以上三種方式都可以實(shí)現(xiàn)跳轉(zhuǎn)，都可以通過this.$route.params來取到參數(shù)

2，$route.query

類型: Object

一個 key/value 對象，表示 URL 查詢參數(shù)。例如，對于路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數(shù)，則是個空對象。

// 動態(tài)數(shù)據(jù)的查詢參數(shù)
 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 }">驗(yàn)證抵扣券</router-link>

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

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

實(shí)際工作中使用的時候就可以像下面這樣：

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: '活動現(xiàn)場'}},
 {path: '/start', component: Start, name: 'start', meta: {isNeedAuth: false, title: '活動現(xiàn)場'}},
];
const router = new VueRouter({...});
router.beforeEach((to, from, next) => {
 // 動態(tài)修改頁面的title
 setTitleHack(to.meta.title);
  // 根據(jù)自定義的路由元信息來做判斷：
 if (to.meta.isNeedAuth !== false) {
  // do something
 } else {
  // do something
 }
 next();
});

4，append

設(shè)置 append 屬性后，則在當(dāng)前（相對）路徑前添加基路徑。例如，我們從 /a 導(dǎo)航到一個相對路徑 b，如果沒有配置 append，則路徑為 /b，如果配了，則為 /a/b

復(fù)制代碼 代碼如下:

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

如果上面這個路由是從home頁面跳轉(zhuǎn)過來，得到的結(jié)果就是/home/coupon/detail/id

5，active-class

類型: string

默認(rèn)值: "router-link-active"

設(shè)置 鏈接激活時使用的 CSS 類名。默認(rèn)值可以通過路由的構(gòu)造選項(xiàng) linkActiveClass 來全局配置。

復(fù)制代碼 代碼如下:

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

7，綜合案例

// 命名路由，append 屬性，查詢參數(shù)，router-link渲染成<li>標(biāo)簽
<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的值：對象形式，拼接多個動態(tài)參數(shù)
<router-link :to="{path: '/my/modify?modify=fullname&val=' + profile.nickname}" ></router-link>

// to的值：對象形式
<router-link :to="{path: '/home'}">返回首頁</router-link>

// to的值：對象形式，拼接動態(tài)參數(shù)
<router-link to="{path: '/backend/coupon_order_detail/' + product.order_id+'?order_status='+product.order_status}"></router-link>

// to的值：對象形式，帶一個路徑參數(shù)
<router-link :to="{path: '/detail/' + this.$route.params.id}" ></router-link>

感謝各位的閱讀！關(guān)于“vue-router 2.0 常用基礎(chǔ)知識點(diǎn)之router-link的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：vue-router2.0常用基礎(chǔ)知識點(diǎn)之router-link的示例分析
當(dāng)前地址：http://www.chinadenli.net/article26/gidgcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站制作、定制網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站改版、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)