溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了在Nuxt環境中如何配置路由和傳遞參數，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
簡單路由Demo
我們現在在根目錄的pages文件下新建兩個文件夾，about和news(模仿關于我們和新聞的功能模塊)
在about文件夾下新建index.vue文件，代碼如下：
<template>
<div>
<h3>About Index page</h3>
<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>
<h3>News Index page</h3>
<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>
<h3>About Index page</h3>
<ul>
<li><nuxt-link :to="{name:'index'}">Home</nuxt-link></li>
</ul>
</div>
</template>news文件夾下新建index.vue
<template>
<div>
<h3>News Index page</h3>
<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>
<h3>News Index page</h3>
<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環境中如何配置路由和傳遞參數，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
