在Nuxt環(huán)境中如何配置路由和傳遞參數(shù)

發(fā)布時(shí)間：2020-11-07 15:07:29 來源：億速云閱讀：455 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章為大家展示了在Nuxt環(huán)境中如何配置路由和傳遞參數(shù)，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

簡(jiǎn)單路由Demo

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

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

結(jié)果如下：

在Nuxt環(huán)境中如何配置路由和傳遞參數(shù)

<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>
    <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傳遞參數(shù)

路由經(jīng)常需要傳遞參數(shù)，我們可以簡(jiǎn)單的使用params來進(jìn)行傳遞參數(shù)，我們現(xiàn)在向新聞頁面（news）傳遞個(gè)參數(shù)，然后在新聞頁面進(jìn)行簡(jiǎ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>
   <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環(huán)境中如何配置路由和傳遞參數(shù)

補(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ù)不變

上述內(nèi)容就是在Nuxt環(huán)境中如何配置路由和傳遞參數(shù)，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

在Nuxt環(huán)境中如何配置路由和傳遞參數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽