vue-router之nuxt動態(tài)路由設(shè)置的兩種方法小結(jié)
更新時間：2018年09月26日 14:17:21 作者：HainesFreeman
今天小編就為大家分享一篇vue-router之nuxt動態(tài)路由設(shè)置的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
方法一：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前面別忘記加一個冒號，作為動態(tài)路徑，用變量理解
2--正常路由別忘記帶引號（本身是字符串）
方法二：函數(shù)式路由
1.在listItem設(shè)置一個函數(shù)go(id）,準(zhǔn)備跳轉(zhuǎn)到詳情頁
<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.路徑中加個參數(shù)即可
go(id) {
this.$router.push({
path: '/comments/' + id,
});
}
以上這篇vue-router之nuxt動態(tài)路由設(shè)置的兩種方法小結(jié)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vuejs實(shí)現(xiàn)一個todolist項(xiàng)目
這篇文章主要為大家詳細(xì)介紹了基于vuejs實(shí)現(xiàn)一個todolist項(xiàng)目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue中使用vue-cli接入融云實(shí)現(xiàn)即時通信
這篇文章主要介紹了vue中使用vue-cli接入融云實(shí)現(xiàn)即時通信的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
element使用自定義icon圖標(biāo)的詳細(xì)步驟
前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標(biāo)庫,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了如何讓別人訪問本地運(yùn)行的vue項(xiàng)目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue.js每天必學(xué)之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要給大家介紹了關(guān)于vue使用dagre-d3畫流程圖的完整代碼,dagre-d3.js是一個用于在Vue.js框架中實(shí)現(xiàn)DAG（有向無環(huán)圖）可視化的庫,它結(jié)合了vue.js、dagre和d3.js這三個庫的功能,需要的朋友可以參考下2024-02-02
vue修改vue項(xiàng)目運(yùn)行端口號的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue3的自定義指令directives實(shí)現(xiàn)
本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細(xì),感興趣的朋友一起看看吧2024-01-01
在做文字處理的項(xiàng)目時經(jīng)常會遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12