基礎 vue router實現子路由

2021-10-06 13:07:39 字數 1540 閱讀 2398

//例子一   index.js


import vue from 'vue'


import router from 'vue-router'


import helloworld from '@/components/helloworld'


import first from '@/components/first'


import a from '@/components/a'


import b from '@/components/b'


import a1 from '@/components/a1'


import a2 from '@/components/a2'


vue.use(router)


export default new router(,,]


},    


]})
//首頁 first.vue


轉向a頁面


轉向b頁面




我是a。。。


返回轉到a1


轉到a2




我是b。。。


返回


我是a1


返回上一級


返回首頁




我是a2


返回上一級


返回首頁
例子二：



import vue from 'vue'


import router from 'vue-router'


import helloworld from '@/components/helloworld'


import first from '@/components/first'


import a from '@/components/a'


import b from '@/components/b'


import a1 from '@/components/a1'


import a2 from '@/components/a2'


vue.use(router)


export default new router(,,,]} 


]})


我是a。。。


返回轉到a1


轉到a2




轉向a頁面


轉向b頁面




我是b。。。


返回


我是a1


返回上一級


返回首頁




我是a2


返回上一級


返回首頁

vue router 學習2 子路由

實際生活中的應用介面，通常由多層的元件組合而成。同樣地，url 中各段動態路徑也按某種結構對應巢狀的各層元件。借助vue router，使用巢狀路由配置，就可以很簡單地表達這種關係。我們來看這樣的乙個例子 我們首先建立兩個新的元件，當做巢狀路由中的元件，hi1.vue hi2.vue 這兩個元件都是...

vue router子路由 路由巢狀

定義 子路由，也叫路由巢狀，採用在children後跟路由陣列來實現，陣列裡和其他配置路由基本相同，需要配置path和component，然後在相應部分新增來展現子頁面資訊，相當於嵌入iframe。hello h1 新增子路由導航 導航 home 首頁 router link home one 子頁...

Vue路由（vue router）03（子路由）

對於單頁面的vue應用，子路由的配置可能是必不可少的，其實vue的子路由配置很簡單。這篇文章是基於上一片文章 路由配置02 的。示例需求，早footer.vue模組中配置子路由 示例檔案footer01.vue和footer02.vue 1.在components資料夾下新建乙個children資料...