Nuxt的路由配置和引數傳遞方式
學習前端框架都要學習路由機制，因為路由可以體現我們的業務邏輯，把模組串聯起來，讓程式換髮光彩。
那簡單的說路由就是我們的跳轉機制，也可以簡單理解成連結跳轉。
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的路由配置和引數傳遞方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。