1 安裝
首先,通過 npm 安裝 vue-router 外掛:
npm install --save vue-router
複製程式碼
安裝的外掛版本是:vue-router@3.0.2
2 用法
2.1 新建 vue 元件
在 router 目錄中,新建 views 目錄,然後新建兩個 vue 元件(一個頁面就對應一個元件)。
index.vue:
<template>
<div>首頁</div>
</template>
<script>
export default {
name: "index.vue"
}
</script>
<style scoped>
</style>
複製程式碼
about.vue:
<template>
<div>關於我們</div>
</template>
<script>
export default {
name: "about"
}
</script>
<style scoped>
</style>
複製程式碼
2.2 修改 main.js
// 引入 Vue 框架
import Vue from 'vue'
import VueRouter from 'vue-router';
//引入 hello.vue 元件
import Hello from './hello.vue'
//載入 vue-router 外掛
Vue.use(VueRouter);
/*定義路由匹配表*/
const Routers = [{
path: '/index',
component: (resolve) => require(['./router/views/index.vue'], resolve)
},
{
path: '/about',
component: (resolve) => require(['./router/views/about.vue'], resolve)
}]
//路由配置
const RouterConfig = {
//使用 HTML5 的 History 路由模式
mode: 'history',
routes: Routers
};
//路由例項
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,
render: h => h(Hello)
})
複製程式碼
步驟如下:
- 載入 vue-router 外掛。
- 定義路由匹配表,每個路由對映到一個元件。
- 配置路由。
- 新建路由例項。
- 在 Vue 例項中引用路由例項。
Routers 中的每一項,都有以下這些屬性:
屬性 | 說明 |
---|---|
path | 匹配路徑 |
component | 需要對映的元件 |
webpack 把每一個路由都打包成一個 js 檔案。只有在請求該頁面時,才會載入這個 js 檔案,即按需載入。
如果需要一次性載入,那麼可以這樣配置:
{
path: '/index',
component: require('./router/views/index.vue')
}
複製程式碼
配置了非同步路由之後,編譯出的頁面 js 被稱為 chunk,它們預設的命名格式為 0.main.js、1.main.js 等等。
可以在 webpack.config.js 中配置這個 chunk 的命名格式:
output: {
...
//chunk 檔名
chunkFilename:'[name].chunk.js'
}
複製程式碼
重新整理頁面之後,就會在除錯模式看到 chunk 名稱已經被改變咯:
在 RouterConfig 中,我們使用了 HTML5 的 History 路由模式,即通過 "/" 來設定路徑。如果不配置 mode,RouterConfig 預設是使用 “#” (錨點)來匹配路徑。
注意: 生產環境中,服務端必須將所有路由都指向同一個 HTML,或設定 404 頁面為這個 HTML 頁面,否則重新整理頁面就會出現 404 錯誤。
2.3 配置 chunk 樣式
使用了 chunk 之後,每個 *.vue 檔案中所定義的樣式,預設通過 Javascript 來動態建立 <style>
標籤來寫入樣式。我們可以通過配置,把這些檔案中的樣式都統一寫入 main.css,修改 webpack.config.js :
plugins: [//外掛
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
}),
...
]
複製程式碼
2.4 配置 History 路由指令
在 package.json 中,修改 dev 指令:
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
複製程式碼
2.5 掛載路由元件
在根例項,掛載路由元件:
<template>
<div>
<router-view></router-view>
</div>
</template>
複製程式碼
執行時,<router-view>
會根據當前所配置的路由規則,渲染出不同的頁面元件。主介面中的公共部分,比如側邊欄、導航欄以及底部版權資訊欄,可以直接定義在根目錄,與<router-view>
同級。這樣,當切換路由時,切換的只是<router-view>
掛載的元件,其它內容不會變化。
2.6 執行
執行 npm run dev
之後,在瀏覽器位址列輸入不同的 URL ,就會看到掛載的不同元件資訊。
2.7 重定向
我們可以在路由配置表中,配置一項功能,當訪問的頁面不存在時,重定向到首頁:
const Routers = [
...
{//當訪問的頁面不存在時,重定向到首頁
path: '*',
redirect: '/index'
}
]
複製程式碼
這樣,即使只訪問 http://localhost:8080/,也會自動跳轉到首頁啦 O(∩_∩)O~
2.8 帶引數的路由
路由 path 可以帶引數。比如文章 URL,路由的前半部分是固定的,後半部分是動態引數,形如:/article/xxx。它們會被路由到同一個頁面,在該頁面可以獲取 xxx 引數,然後根據這個引數來請求資料。
首先在 main.js 中配置帶引數的路由規則:
const Routers = [{
...
{
path: '/article/:id',
component: (resolve) => require(['./router/views/article.vue'], resolve)
}
...
]
複製程式碼
然後在 router/views 下新建一個 article.vue :
<template>
<div>{{$route.params.id}}</div>
</template>
<script>
export default {
name: "article",
mounted() {
console.log(this.$route.params.id);
}
}
</script>
<style scoped>
</style>
複製程式碼
執行 npm run dev
後,在瀏覽器位址列中輸入 http://localhost:8080/article/123
,就能訪問到 article.vue 元件咯:
注意: 因為配置的引數路由規則是
/article/:id
,即必須帶 id 引數,否則是會重定向會/index
的哦O(∩_∩)O~