之三 巢狀路由

2021-09-07 14:21:35 字數 640 閱讀 8685

巢狀路由,即路由中巢狀路由。

下面的例子,舉例商品列表頁面中,通過乙個路由檢視商品的標題,再通過乙個路由檢視商品的。

我們先定義兩個元件,title.vue , image.vue。

下面是title.vue 

商品名稱

image.vue 就不列出了。

然後,我們修改router/index.js , 給商品列表路由定義子路由。如下。

import vue from 'vue'

import router from 'vue-router'

import goodlist from '@/views/goodlist'

import title from '@/views/title'

import image from '@/views/image'

vue.use(router)

export default new router(, ]}]

})

然後,再去goodlist.vue 中修改。如下。

這是商品列表頁

}}顯示商品標題

顯示商品

done!

vue router 巢狀路由

我們已經學習過了vue模板的另外定義形式,使用。首頁 新聞然後js裡定義路由元件的時候 1.定義 路由 元件。const home const news 實際應用介面,通常由多層巢狀的元件組合而成。比如,我們 首頁 元件中,還巢狀著 登入 和 註冊 元件,那麼url對應就是 home login和 ...

Vue巢狀路由

src components index page index2 router index.js main.js html部分 2級頁面在此顯示 import vue from vue import router from router 引入router.js import vuex from vu...

react router 巢狀路由

import react from react import from react router dom export default function function home console.log match return h2 function about function topics ...