1 安裝

首先，通過 npm 安裝 vue-router 插件：

npm install --save vue-router

安裝的插件版本是：vue-router@3.0.2

2 用法

2.1 新建 vue 組件

在 router 目錄中，新建  views 目錄，然后新建兩個(gè) vue 組件（一個(gè)頁(yè)面就對(duì)應(yīng)一個(gè)組件）。

index.vue：

<template>
  <div>首頁(yè)</div>
</template>

<script>
  export default {
    name: "index.vue"
  }
</script>

<style scoped>

</style>

about.vue：

<template>
  <div>關(guān)于我們</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
};
//路由實(shí)例
const router = new VueRouter(RouterConfig);

 

new Vue({
  el: '#app',
  router: router,
  render: h => h(Hello)
})

步驟如下：

1. 加載 vue-router 插件。
2. 定義路由匹配表，每個(gè)路由映射到一個(gè)組件。
3. 配置路由。
4. 新建路由實(shí)例。
5. 在 Vue 實(shí)例中引用路由實(shí)例。

Routers 中的每一項(xiàng)，都有以下這些屬性：

webpack 把每一個(gè)路由都打包成一個(gè) js 文件。只有在請(qǐng)求該頁(yè)面時(shí)，才會(huì)加載這個(gè) js 文件，即按需加載。

如果需要一次性加載，那么可以這樣配置：

{
    path: '/index',
    component: require('./router/views/index.vue')
}

配置了異步路由之后，編譯出的頁(yè)面 js 被稱為 chunk，它們默認(rèn)的命名格式為 0.main.js、1.main.js 等等。

可以在 webpack.config.js 中配置這個(gè) chunk 的命名格式：

 output: {
    ...
    //chunk 文件名
    chunkFilename:'[name].chunk.js'
  }

刷新頁(yè)面之后，就會(huì)在調(diào)試模式看到 chunk 名稱已經(jīng)被改變咯：

在 RouterConfig 中，我們使用了  HTML5 的 History 路由模式，即通過 "/" 來(lái)設(shè)置路徑。如果不配置 mode，RouterConfig 默認(rèn)是使用 “#” （錨點(diǎn)）來(lái)匹配路徑。

注意： 生產(chǎn)環(huán)境中，服務(wù)端必須將所有路由都指向同一個(gè) HTML，或設(shè)置 404 頁(yè)面為這個(gè) HTML 頁(yè)面，否則刷新頁(yè)面就會(huì)出現(xiàn) 404 錯(cuò)誤。

2.3 配置 chunk 樣式

使用了 chunk 之后，每個(gè) *.vue 文件中所定義的樣式，默認(rèn)通過 Javascript 來(lái)動(dòng)態(tài)創(chuàng)建 <style> 標(biāo)簽來(lái)寫入樣式。我們可以通過配置，把這些文件中的樣式都統(tǒng)一寫入 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 掛載路由組件

在根實(shí)例，掛載路由組件：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

運(yùn)行時(shí)，<router-view> 會(huì)根據(jù)當(dāng)前所配置的路由規(guī)則，渲染出不同的頁(yè)面組件。主界面中的公共部分，比如側(cè)邊欄、導(dǎo)航欄以及底部版權(quán)信息欄，可以直接定義在根目錄，與<router-view> 同級(jí)。這樣，當(dāng)切換路由時(shí)，切換的只是<router-view> 掛載的組件，其它內(nèi)容不會(huì)變化。

2.6 運(yùn)行

執(zhí)行 npm run dev 之后，在瀏覽器地址欄輸入不同的 URL ，就會(huì)看到掛載的不同組件信息。
http://localhost:8080/index：

http://localhost:8080/about：

2.7 重定向

我們可以在路由配置表中，配置一項(xiàng)功能，當(dāng)訪問的頁(yè)面不存在時(shí)，重定向到首頁(yè)：

const Routers = [
...
  {//當(dāng)訪問的頁(yè)面不存在時(shí)，重定向到首頁(yè)
    path: '*',
    redirect: '/index'
  }
]

這樣，即使只訪問 http://localhost:8080/，也會(huì)自動(dòng)跳轉(zhuǎn)到首頁(yè)啦 O(∩_∩)O~

2.8 帶參數(shù)的路由

路由 path 可以帶參數(shù)。比如文章 URL，路由的前半部分是固定的，后半部分是動(dòng)態(tài)參數(shù)，形如：/article/xxx。它們會(huì)被路由到同一個(gè)頁(yè)面，在該頁(yè)面可以獲取 xxx 參數(shù)，然后根據(jù)這個(gè)參數(shù)來(lái)請(qǐng)求數(shù)據(jù)。

首先在 main.js 中配置帶參數(shù)的路由規(guī)則：

const Routers = [{
 ...
  {
    path: '/article/:id',
    component: (resolve) => require(['./router/views/article.vue'], resolve)
  }
  ...
]

然后在 router/views 下新建一個(gè) 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>

運(yùn)行 npm run dev 后，在瀏覽器地址欄中輸入 http://localhost:8080/article/123，就能訪問到 article.vue 組件咯：

注意： 因?yàn)榕渲玫膮?shù)路由規(guī)則是 /article/:id，即必須帶 id 參數(shù)，否則是會(huì)重定向會(huì) /index 的哦O(∩_∩)O~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論