設定子路由

2022-11-27 15:37:44 字數 951 閱讀 7258

在shop元件中需要實現這種效果

頭部有一個shopheader元件

中間有三個點選路由的地方,點選其中的一個可以切換到相應的路由

建立router資料夾,建立index.js和routes.js

在routes.js註冊路由元件

1/*2

所有路由配置的陣列3*/

45 import shop from '@/pages/shop/shop'

6 import goods from '@/pages/shop/goods'

7 import info from '@/pages/shop/info'

8 import ratings from '@/pages/shop/ratings'

910 export default[11

,19,23

,2731]

32},

3334 ]

在index.js中進行向外暴露路由元件

1/*2

向外暴露路由器物件模組3*/

4 import vue from 'vue'

5 import vuerouter from 'vue-router'

6 import routes from './routes'78

//宣告使用vue外掛

9vue.use(vuerouter)

1011 export default

newvuerouter()

在shop元件中

123

456點餐

789評價

1011

12商家

131415

1617

18

Vue vue router巢狀路由 子路由

總共新增兩個子路由,分別命名collection.vue 我的收藏 和trace.vue 我的足跡 1 重構router index.js的路由配置,需要使用children陣列來定義子路由,具體如下 import vue from vue import router from vue router...

vue子路由children的使用

前言 上次簡單介紹了vue router,並且建立了兩個路由,如果還沒學過路由基礎知識請點這裡 子路由 比如有一個地址,圈出的地方在about目錄下,可以是childrouter1,也可以是childrouter2,那麼childrouter1 childrouter2就叫做about的子路由 建立...

切換子路由時,父路由的元件會重新渲染

做使用者中心的時候,使用者中心左側顯示使用者頭像和導航欄,點選導航欄會切換子路由 我在父路由元件created呼叫獲取使用者頭像介面,發現每次切換子路由都會呼叫該介面,也就是每次切換子路由,父路由都會重新渲染 home中 也就是渲染父路由的容器。因為設定了key,所以改變路由時,只要key發生變化,...