學(xué)習(xí)前端框架都要學(xué)習(xí)路由機(jī)制，因?yàn)槁酚煽梢泽w現(xiàn)我們的業(yè)務(wù)邏輯，把模塊串聯(lián)起來，讓程序換發(fā)光彩。

那簡單的說路由就是我們的跳轉(zhuǎn)機(jī)制，也可以簡單理解成鏈接跳轉(zhuǎn)。

Nuxt.js的路由并不復(fù)雜，它給我們進(jìn)行了封裝，讓我們節(jié)省了很多配置環(huán)節(jié)。

簡單路由Demo

我們現(xiàn)在在根目錄的pages文件下新建兩個(gè)文件夾，about和news(模仿關(guān)于我們和新聞的功能模塊)

在about文件夾下新建index.vue文件，代碼如下：

<template>
 <div>
  <h2>About Index page</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

在news文件夾下新建index.vue文件，代碼如下：

<template>
 <div>
  <h2>News Index page</h2>
  <ul>
   <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

修改原來的pages文件夾下的index.vue，刪除沒用的代碼，寫入下面鏈接代碼：

<template>
 <div>
 <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >HOME</a></li>
  <li><a href="/about" rel="external nofollow" >ABOUT</a></li>
  <li><a href="/news" rel="external nofollow" >NEWS</a></li>
 </ul>
 </div>
</template>

<script>
export default {
 comments:{}
}
</script>

<style lang="less" scoped>

</style>

結(jié)果如下：

<nuxt-link>標(biāo)簽

雖然上面的例子跳轉(zhuǎn)已經(jīng)成功，但是Nuxt.js并不推薦這個(gè)中<a>標(biāo)簽的作法，它為我們準(zhǔn)備了<nuxt-link>標(biāo)簽（vue中叫組件）。我們<a>標(biāo)簽替換成<nuxt-link>

about文件夾下新建index.vue

<template>
 <div>
  <h2>About Index page</h2>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
  </ul>
 </div>
</template>

news文件夾下新建index.vue

<template>
 <div>
  <h2>News Index page</h2>
  <ul>
   <li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
  </ul>
 </div>
</template>

pages文件夾下的index.vue

<template>
 <div>
 <ul>
  <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
  <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
  <li><nuxt-link :to="{name:'news'}">NEWS</nuxt-link></li>
 </ul>
 </div>
</template>

<script>
export default {
}
</script>

<style>

</style>

params傳遞參數(shù)

路由經(jīng)常需要傳遞參數(shù)，我們可以簡單的使用params來進(jìn)行傳遞參數(shù)，我們現(xiàn)在向新聞頁面（news）傳遞個(gè)參數(shù)，然后在新聞頁面進(jìn)行簡單的接收。

我們先修改pages下的Index.vue文件，給新聞的跳轉(zhuǎn)加上params參數(shù)，傳遞3306ID。

<template>
 <div>
 <ul>
  <li><nuxt-link :to="{name:'index'}">HOME</nuxt-link></li>
  <li><nuxt-link :to="{name:'about'}">ABOUT</nuxt-link></li>
  <li><nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link></li>
 </ul>
 </div>
</template>
<script>
export default {
 components: {
 }
}
</script>
<style>
</style>

在news文件夾下的index.vue里用$route.params.newsId進(jìn)行接收，代碼如下。

<template>
 <div>
  <h2>News Index page</h2>
  <p>NewsID:{{$route.params.newsId}}</p>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  </ul>
 </div>
</template>

補(bǔ)充知識(shí)：nuxt路由中的params和query

定義路由

路由表,配置的整個(gè)項(xiàng)目中可以訪問的所有的路由信息

建議每一個(gè)路由都加一個(gè)name屬性，在頁面跳轉(zhuǎn)的時(shí)候使用

建議name不能重復(fù)

const router=new VueRouter({
 routes:[
  {
   path: '/detail', // 表示路徑,表示url地址欄中輸入的內(nèi)容
   component: Home, // 表示訪問這個(gè)地址的時(shí)候顯示哪一個(gè)組件
   name: 'H', // 名字
  } 
 ]
 
})

路由跳轉(zhuǎn)

1.router-link to屬性設(shè)置跳轉(zhuǎn)信息

to可以直接設(shè)置一個(gè)字符串,表示跳轉(zhuǎn)的url地址

to可跟一個(gè)對(duì)象,建議使用此方法,跳轉(zhuǎn)的時(shí)候使用name

2.編程式跳轉(zhuǎn)

$router.push

路由傳參

1.query 表示參數(shù)在url后面進(jìn)行傳遞，參數(shù)直接拼在url地址欄的后面，用？分割一下，多個(gè)參數(shù)用&分割

獲取使用 $route.query

2.params 表示在routes定義的時(shí)候可以使用 “：參數(shù)名”的形式進(jìn)行占位處理

可以傳遞多個(gè)參數(shù) 如果要保證頁面刷新之后參數(shù)還可以使用，需要在routes中做配置

獲取使用 $route.params

(細(xì)節(jié)重點(diǎn))如果想要在頁面刷新或者執(zhí)行其它操作之后還保留傳遞的參數(shù)，需要在路由表（routes）中作配置，使用 “：參數(shù)名”的形式進(jìn)行占位處理

補(bǔ)充

當(dāng)使用了vue-router組件之后

項(xiàng)目中會(huì)自動(dòng)生成兩個(gè)變量 $route $router

$route 表示當(dāng)前頁的路由信息 獲取獲取 地址 query params等參數(shù)
$router 表示路由對(duì)象 可以在上面訪問路由的跳轉(zhuǎn)方法
$route.params 獲取params傳的參數(shù)
$route.query 獲取query傳的參數(shù)
// vue-router學(xué)習(xí)筆記 記錄開發(fā)中的點(diǎn)點(diǎn)滴滴

跳轉(zhuǎn)路由的幾種方式：

1、聲明式：

1) 根據(jù)路由路徑（/home/sort/detail）跳轉(zhuǎn) <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">點(diǎn)擊查看子頁面</router-link>

2) 根據(jù)路由名稱（detail）跳轉(zhuǎn) <router-link :to="{name: 'detail', params:{id: 'abc'}}">點(diǎn)擊查看子頁面</router-link> :to="" 可以實(shí)現(xiàn)綁定動(dòng)態(tài)的 路由 和 參數(shù)

2、編程式：

1） this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})

2） this.$router.push({name: 'detail',params:{id: 'abc'}})

備注： params 和 query 傳參的區(qū)別：

1、params傳參時(shí) 參數(shù)不會(huì)出現(xiàn)在url的路徑上面， 但是刷新頁面時(shí)param里面的數(shù)據(jù)會(huì)消失

2、query傳參時(shí) 參數(shù)出現(xiàn)在url的路徑上面， 刷新頁面時(shí)query里面的數(shù)據(jù)不變

以上這篇Nuxt的路由配置和參數(shù)傳遞方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論