說說如何使用 vue-router 外掛

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)
})
複製程式碼

步驟如下：

1. 載入 vue-router 外掛。
2. 定義路由匹配表，每個路由對映到一個元件。
3. 配置路由。
4. 新建路由例項。
5. 在 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 ，就會看到掛載的不同元件資訊。

http://localhost:8080/index：

http://localhost:8080/about：

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~