nuxt 嵌套路由跳轉方式 (不同目錄下跳轉)


今天研究了下nuxt 感覺路由跳轉和vue的有點差別,但不是很大,總結了一點方法分享

1、同目錄路由跳轉,從當前目錄index.vue 跳到同目錄下的home.vue 路由下

這種方式很簡單,直接 <nuxt-link to='/home'>home</nuxt-link> 就OK了

2、嵌套路由跳轉, 從當前目錄 home.vue 跳到同目錄下home文件夾中的title.vue 

這種相對待開發中用的比較多,首先由在pages目錄下有一個和home文件夾同名的home.vue,在第一步我們已經創建好了,這不是必須的(必須同名),

然后在home.vue中加入:

<nuxt-link to="/home/title">home/title</nuxt-link>
<nuxt-child></nuxt-child>

這樣才可以切換到title.vue組件中

3、嵌套路由跳轉,從當前目錄 index.vue 跳到同目錄下home文件夾中的title.vue, 這種相對待開發中用的也比較多,在官方文檔中沒有給出明確的方式,但是官方給了一種

動態添加路由的方法可以實現這一點:關鍵來了

在index.vue中加入:

<nuxt-link :to="{name:'home-title',params:{id:'title'}}">title</nuxt-link>

關鍵點要把title.vue的名字改為_title.vue ,  其中id:“title” 的目的是為了使path為 /home/title ,可以把params中的id值寫死,這樣就是實現了嵌套路由跳轉(不用在pages下建一個同名的vue文件了)

如果要在_title.vue下跳轉到同目錄下的xxx.vue 下 ,直接 <nuxt-link to='/home/xxx'>xxx</nuxt-link> 就OK了

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM