Vue cli3如何新增路由(router)

2022-01-22 11:08:41 字數 911 閱讀 7686

之前使用的vue-cli2的是否可以在建立專案時直接引入vue-router,但是現在vue-cli3新建專案後卻少了很多東西,我們需要自己來安裝使用路由。具體方案如下:

安裝路由

npm install vue-router
建立router.js與mian.js同級

router.js中的內容為

import vue from '

vue'

import router from

'vue-router'//

元件模組

import main from '

./components/content/main

'import header from

'./components/header/header

'import admin from

'./components/admin/admin

'vue.use(router)

export default new router(,,,

]})

在main.js中新增如下內容

接下裡就可以開始使用路由了,在需要使用路由的地方加入以下內容

"

/">主頁 //

切換到指定的元件

"/main

">主頁

"/admin

">管理頁

//元件顯示的地方

也可通過事件的方法來使用路由

methods:,   

//使用路由返回上一級

goback() ,

}

Vue Cli 3 動態路由實現偽靜態

想要實現偽靜態,路徑後面加上 html 字尾,可以通過動態路由來實現。首先在你想要實現偽靜態的頁面的路由規則中配置,如 這裡是給 detail 這個頁面的路由中配置乙個引數 id,這個引數是 parmas 引數,傳遞的方式有兩種 this.router.push 注意引數名得和路由規則中配置得一致,...

vue cli3路由vue router用法

npm install vue router main.js檔案內 匯入vue router import vue from vue vue router是以來vue的 import vuerouter from vue router 匯入vue router,注意import vuerouter ...

vue cli3 為專案新增多入口

git 位址 新增多入口原因 由於vue為單頁面專案,通過控制項區域性渲染,main.js是整個專案唯一的入口,整個專案都在乙個index.html外殼中。若專案過大,會造成單頁面負載過重 同時,多頁面利於模組獨立部署。新增多入口過程 1.在public中新建多個頁面 3.在vue配置檔案中 vue...