vue配置路由以及設定路徑簡寫

2022-04-02 14:48:04 字數 942 閱讀 5603

1、關於路徑簡寫:@是乙個簡寫,指代src目錄

設定簡寫的檔案 build/webpack.base.config.js

2、我們也可以自己給常用的目錄新增簡寫

3、在 src/main.js 中給主頁新增index.scss樣式,使用簡寫的路徑表示

4、配置路由

src/pages/home/index.vue

src/pages/product/index.vue

product

router/index.js

import vue from 'vue'import router from 'vue-router'import home from 'pages/home'import product from 'pages/product'vue.use(router)

export

default

newrouter(]},

]})

效果圖

5、當頁面比較多的時候,直接顯示可能有時並不太理想,可以考慮使用按需載入

修改router/index.js

import vue from 'vue'import router from 'vue-router'vue.use(router)

export

default

newrouter(]},

]})

vue路由配置,vue子路由配置

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

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 ...

vue路由配置

1 安裝路由,因為路由是vue的乙個外掛程式。npm cnpm install vue router d2 在main.js中引入路由 import vue form vue import vuerouter from vue router vue.use vuerouter 3 在main.js中...