Nuxt的路由設定和引數傳遞方式

2020-11-06 12:05:41

學習前端框架都要學習路由機制，因為路由可以體現我們的業務邏輯，把模組串聯起來，讓程式換髮光彩。

那簡單的說路由就是我們的跳轉機制，也可以簡單理解成連結跳轉。

Nuxt.js的路由並不複雜，它給我們進行了封裝，讓我們節省了很多設定環節。

簡單路由Demo

我們現在在根目錄的pages檔案下新建兩個資料夾，about和news(模仿關於我們和新聞的功能模組)

在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>

結果如下：

<nuxt-link>標籤

雖然上面的例子跳轉已經成功，但是Nuxt.js並不推薦這個中<a>標籤的作法，它為我們準備了<nuxt-link>標籤（vue中叫元件）。我們<a>標籤替換成<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傳遞引數

路由經常需要傳遞引數，我們可以簡單的使用params來進行傳遞引數，我們現在向新聞頁面（news）傳遞個引數，然後在新聞頁面進行簡單的接收。

我們先修改pages下的Index.vue檔案，給新聞的跳轉加上params引數，傳遞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進行接收，程式碼如下。

<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>

補充知識：nuxt路由中的params和query

定義路由

路由表,設定的整個專案中可以存取的所有的路由資訊

建議每一個路由都加一個name屬性，在頁面跳轉的時候使用

建議name不能重複

const router=new VueRouter({
 routes:[
  {
   path: '/detail', // 表示路徑,表示url位址列中輸入的內容
   component: Home, // 表示存取這個地址的時候顯示哪一個元件
   name: 'H', // 名字
  } 
 ]
 
})

路由跳轉

1.router-link to屬性設定跳轉資訊

to可以直接設定一個字串,表示跳轉的url地址

to可跟一個物件,建議使用此方法,跳轉的時候使用name

2.程式設計式跳轉

$router.push

路由傳參

1.query 表示引數在url後面進行傳遞，引數直接拼在url位址列的後面，用？分割一下，多個引數用&分割

獲取使用 $route.query

2.params 表示在routes定義的時候可以使用「：引數名」的形式進行佔位處理

可以傳遞多個引數如果要保證頁面重新整理之後引數還可以使用，需要在routes中做設定

獲取使用 $route.params

(細節重點)如果想要在頁面重新整理或者執行其它操作之後還保留傳遞的引數，需要在路由表（routes）中作設定，使用「：引數名」的形式進行佔位處理

補充

當使用了vue-router元件之後

專案中會自動生成兩個變數 $route $router

$route 表示當前頁的路由資訊 獲取獲取 地址 query params等引數
$router 表示路由物件 可以在上面存取路由的跳轉方法
$route.params 獲取params傳的引數
$route.query 獲取query傳的引數
// vue-router學習筆記 記錄開發中的點點滴滴

跳轉路由的幾種方式：

1、宣告式：

1) 根據路由路徑（/home/sort/detail）跳轉 <router-link :to="{path: '/home/sort/detail', query:{id: 'abc'}}">點選檢視子頁面</router-link>

2) 根據路由名稱（detail）跳轉 <router-link :to="{name: 'detail', params:{id: 'abc'}}">點選檢視子頁面</router-link> :to="" 可以實現繫結動態的路由和引數

2、程式設計式：

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

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

備註： params 和 query 傳參的區別：

1、params傳參時引數不會出現在url的路徑上面，但是重新整理頁面時param裡面的資料會消失

2、query傳參時引數出現在url的路徑上面，重新整理頁面時query裡面的資料不變

以上這篇Nuxt的路由設定和引數傳遞方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援it145.com。

Nuxt的路由設定和引數傳遞方式

熱門文章