Vue巢狀路由

2021-09-12 17:37:35 字數 1332 閱讀 5039

|-- 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 'vuex'


import router from 'vue-router'            //路由元件已安裝，宣告路由


import vueresource from 'vue-resource'    


import './css/page.css'


vue.config.productiontip = false


vue.use(vuex)


vue.use(router)              //使用路由


vue.use(vueresource)


/* eslint-disable no-new */


new vue()
import vue from 'vue'


import router from 'vue-router'


import home from '@/components/home'


import index from '@/components/index'        //註冊的路由


export default new router(,


]})
<-- 2級頁面所在 -->


訪問 3級 頁面


<-- 3級頁面在此顯示-->


import vue from 'vue'


import router from 'vue-router'


import home from '@/components/home'


import index from '@/components/index'        //註冊的路由


import index2 from '@/components/page/index2'        //註冊的路由


export default new router(,]}


]})

vue 巢狀路由

在乙個頁面中如果想實現三個頁面的拼接組成乙個頁面，這時候就用到巢狀路由了。第一種方法 1.頂部頁面 views home.vue class drophead 個人資訊 退出2.左側欄頁面 view menusecond.vue 3.右側欄頁面 view menuthird.vue 需簽約檢視 路由...

vue巢狀路由

在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 vuerouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。index.html，只有乙個路由出口 1 div id 23 router view router view 4div ...

Vue路由機制 巢狀路由

doctype html html head meta charset utf 8 title vue路由機制 巢狀路由 title head body div id router link to user user router link router link to reg reg router...