Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)
路由跳轉(zhuǎn)代碼如下：
<ul>
<li><nuxt-link :to="{name:'index.vue'}">HOME page</nuxt-link></li>
<li><nuxt-link :to="{name:'new-new'}">NEWS page</nuxt-link></li>
<li><nuxt-link :to="{name:'plays-play'}">PLAY page</nuxt-link></li>
</ul>
注意說明：
to 前面有冒號(hào)“ : ”
to 后面跟的是路徑比如“/page/index”(可以跟字符串或?qū)ο?同上↑
補(bǔ)充知識(shí)：nuxt的 nuxt-link 有個(gè)坑
如果你跟著nuxt的案例走，記住 ，所以目錄 比如 PAGES 目錄 你最好小寫 pages 所有目錄都小寫
因?yàn)?當(dāng)你敲下面哪行代碼 時(shí)
<nuxt-link :to="{name: 'posts-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>
name其實(shí)指向的是路由，而路由死活區(qū)分大小寫的 注意 to后面區(qū)分大小寫?。?！
所以如果你目錄是 大寫的 PAGES
以上代碼要寫成
<nuxt-link :to="{name: 'POSTS-id',params:{ id: post.id }}">{{ post.title }}</nuxt-link>
以上這篇Nuxt.js的路由跳轉(zhuǎn)操作(頁(yè)面跳轉(zhuǎn)nuxt-link)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- nuxt.js添加環(huán)境變量,區(qū)分項(xiàng)目打包環(huán)境操作
- Docker部署Nuxt.js項(xiàng)目的實(shí)現(xiàn)
- nuxt.js服務(wù)端渲染中axios和proxy代理的配置操作
- Nuxt.js nuxt-link與router-link的區(qū)別說明
- nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作
- Nuxt.js 靜態(tài)資源和打包的操作
- nuxt.js寫項(xiàng)目時(shí)增加錯(cuò)誤提示頁(yè)面操作
- 創(chuàng)建nuxt.js項(xiàng)目流程圖解
- nuxt.js 多環(huán)境變量配置
相關(guān)文章
vue & vue Cli 版本及對(duì)應(yīng)關(guān)系解讀
這篇文章主要介紹了vue & vue Cli 版本及對(duì)應(yīng)關(guān)系，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue中Axios的封裝和API接口的管理,主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
關(guān)于vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法
sockjs-node 是一個(gè)JavaScript庫(kù),提供跨瀏覽器JavaScript的API,創(chuàng)建了一個(gè)低延遲、全雙工的瀏覽器和web服務(wù)器之間通信通道,這篇文章主要介紹了vue項(xiàng)目一直出現(xiàn) sockjs-node/info?t=XX的解決辦法,需要的朋友可以參考下2023-12-12
Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能的示例詳解
生活中常用的幾種坐標(biāo)有：WGS-84、GCJ-02與BD-09。本文將利用Vue實(shí)現(xiàn)高德坐標(biāo)轉(zhuǎn)GPS坐標(biāo)功能，即實(shí)現(xiàn)GCJ-02坐標(biāo)轉(zhuǎn)換成WGS-84坐標(biāo)，需要的可以參考一下2022-04-04
vue實(shí)現(xiàn)多組關(guān)鍵詞對(duì)應(yīng)高亮顯示功能
最近小編遇到這樣的問題，多組關(guān)鍵詞，這里實(shí)現(xiàn)了關(guān)鍵詞的背景色與匹配值的字體顏色值相同，下面通過定義關(guān)鍵詞匹配改變字體顏色，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
這篇文章主要為大家介紹了vue2從數(shù)據(jù)到視圖渲染之模板渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式
這篇文章主要介紹了vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Tailwind CSS是一個(gè)流行的前端CSS框架,它基于原子設(shè)計(jì)原則,提供了一套預(yù)構(gòu)建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應(yīng)式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細(xì)教程,需要的朋友可以參考下2024-09-09
詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01