怎么使用vue-router插件

小編給大家分享一下怎么使用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 中的每一項，都有以下這些屬性：

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 的

看完了這篇文章，相信你對“怎么使用vue-router插件”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！