快捷導(dǎo)航

vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)

更新時(shí)間：2018年09月26日 14:17:21 作者：HainesFreeman

今天小編就為大家分享一篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

方法一：router-link

<div class="slide-item" v-for="user in shareData.users">

 <nuxt-link :to="'/community/member/'+ user.id">
  <img src="../../static/head.png" alt="">
  <p>{{user.nickname}}</p>
 </nuxt-link>

</div>

注意：

1---to前面別忘記加一個(gè)冒號(hào)，作為動(dòng)態(tài)路徑，用變量理解

2--正常路由別忘記帶引號(hào)（本身是字符串）

方法二：函數(shù)式路由

1.在listItem設(shè)置一個(gè)函數(shù)go(id）,準(zhǔn)備跳轉(zhuǎn)到詳情頁(yè)

<div class="mov-container" v-for="item in shareData.moments" >
 <div class="mov-item" >
  <div class="mov-img" v-for="photo in item.moment.medias" @click="go(item.moment.id)">
   <img :src="photo" alt="">
   <img src="../../assets/image/player.png" alt="" class="player">
  </div>
  <div class="mov-con">{{item.moment.content}}</div>
  <div class="mov-data">
   <div class="mov-data-l"><img :src="item.user.avatar" alt=""><span>{{item.user.nickname}}</span></div>
   <div class="mov-data-r" :class="{bg1:chose1,bg2:chose2}" @click="changeBg"><span>{{item.moment.like}}</span> </div>
  </div>
 </div>
</div>

2.路徑中加個(gè)參數(shù)即可

go(id) {
 this.$router.push({
  path: '/comments/' + id,
 });
}

以上這篇vue-router之nuxt動(dòng)態(tài)路由設(shè)置的兩種方法小結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目
這篇文章主要為大家詳細(xì)介紹了基于vuejs實(shí)現(xiàn)一個(gè)todolist項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信
這篇文章主要介紹了vue中使用vue-cli接入融云實(shí)現(xiàn)即時(shí)通信的相關(guān)資料,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會(huì)用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫(kù),下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
如何讓別人訪問(wèn)本地運(yùn)行的vue項(xiàng)目
這篇文章主要介紹了如何讓別人訪問(wèn)本地運(yùn)行的vue項(xiàng)目，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue.js每天必學(xué)之構(gòu)造器與生命周期
Vue.js每天必學(xué)之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下
2016-09-09
vue使用dagre-d3畫流程圖的完整代碼
這篇文章主要給大家介紹了關(guān)于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個(gè)用于在Vue.js框架中實(shí)現(xiàn)DAG（有向無(wú)環(huán)圖）可視化的庫(kù),它結(jié)合了vue.js、dagre和d3.js這三個(gè)庫(kù)的功能,需要的朋友可以參考下
2024-02-02
vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-08-08
vue3的自定義指令directives實(shí)現(xiàn)
本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛(ài),這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧
2024-01-01
vue 指定文字高亮的實(shí)現(xiàn)示例
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來(lái)介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12