Vue 路由配置和二級路由配置

2021-10-05 05:15:26 字數 2116 閱讀 5582

我們初始化我們的vue專案後，開啟工程目錄src/router下的index.js。我們可以把工程預設的helloworld.vue檔名，以及元件名更改。同樣也需要在index.js檔案中更改引入的檔名和元件名。

/*index.js 需要更改的地方*/


import home from


'@/components/pages/home/home'


vue.


use(router)


//這裡是全域性路由配置


export


default


newrouter(]


})
這裡面的routes是指所有的路由，預設情況下，也就是不加mode：history的情況，開啟瀏覽器顯示的位址會是,localhost:8080/#/home,mode: 'history』的作用就是去掉「#」符號。需要新增路由 時，我們只需要再在routes新增元件即可，不要忘記引入vue檔案哈。

import home from


'@/components/pages/home/home'


import roll from


'@/components/pages/roll/roll'


export


default


newrouter(,


]})
當我們需要跳轉頁面時，我們只需要在觸發跳轉的外層新增router-link標籤，此處用法為vue2.0.

"/roll"


class


="tag_item"


>


="img img2"


>


<


/div>


<


/router-link>
當我們需要開啟二級標題，或者頁面有切換的tab欄時，我們就可以配置二級路由。同樣的引入元件的方法，我們把元件引入到index.js 中。

import home from


'@/components/pages/home/home'


import roll from


'@/components/pages/roll/roll'


import zhengzaijinxin from


'@/components/pages/roll/components/zhengzaijinxin'


import wocanyude from


'@/components/pages/roll/components/wocanyude'


import yijieshu from


'@/components/pages/roll/components/yijieshu'


vue.


use(router)


export


default


newrouter(,


,,]}


,
這個時候路由已經配置好了，但我們開啟頁面卻發現沒有二級路由的頁面，那是因為我們沒有設定路由出口，在roll頁面上加上router-view標籤就好啦。

="tab-item"


>


"">


="world"


>


<


/div>


<


/router-link>


<


/div>


<


/div>


<


/router-view>


<


/div>
當我們需要設定預設顯示的頁面時只需要新增 redirect即可。

path:


'/roll'


,  name:


'roll'


,  component: roll,


redirect:


'/roll/zhengzaijinxin'


,
那是因為我們在配置路由時書寫不規範，我們需要在路徑前加上一級路由。

,,


]},
router-link也是一樣的

"">

vue路由配置，vue子路由配置

現在乙個專案已經部署完成，接下來我們從路由開始！還記得在初始化專案的時候，有提示是否需要安裝vue router，對沒錯，vue中路由全靠它！首先找到路由配置檔案 router index.js，是整個專案路由配置檔案 首先看最上面的，這個模組引入，es2015中的import.from.將你需要配...

Vue二級路由以及多級路由巢狀思路

在router檔案中的router.js中先 將一級路由註冊 import vue from vue import vuerouter from vue router const routes 這裡是一級路由 import vue from vue import vuerouter from vue...

vue路由配置

1.main.js the vue build version to load with the import command runtime only or standalone has been set in webpack.base.conf with an alias.import vue ...