文組也能看得懂的網頁前端Vue (六)router 路由

介紹vue-router使用


一開始先簡單介紹路由,這邊一樣不講原理或是定義。路由兩個字分開來看就是「路」跟「由」,「路」:表路徑、「由」表由來,所以路由可以看成從一個網頁要如何到另外一個網頁的路徑,簡單來說就是整個網站的地圖,有了地圖就能知道通往每個頁面的網址,這就是路由的功用。


首先我們先將vue的路由套件新增至專案,開啟終端機輸入

npm install vue-router

或是

yarn add vue-router

 下載安裝完畢之後,在/src/main.js 裡面引入路由套件

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import VueRouter from "vue-router"; 
Vue.use(ElementUI);
Vue.use(VueRouter);  
new Vue({
  el: "#app",
  render: h => h(App),
  VueRouter,
  router,
  template: "<App/>",
  components: { App }
});

開始寫路由之前,我們先做一個 Layout(佈局) 出來,Layout可以想成整個網頁的基本模板,然後依照路由設定在上面蓋不同的子頁面,覺得抽象嗎?那我們換個講法,Layout就像是一張披薩餅皮,然後上面可以依照食譜(路由)放臘腸(子頁面)做成美式臘腸披薩,也可以依照食譜(路由)放上鳳梨(第二個子頁面)做成夏威夷披薩。不同的路由(食譜)可以在Layout(披薩皮)顯示不同的頁面(口味)。

先在 /src 底下右鍵新增一個檔案,取名叫做 layout.vue

接下來在裡面打上程式碼

<template>
  <div id="app">
    <el-container>
      <el-header class="el-header">我的第一個Vue網頁</el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import Vue from "vue";
</script>

<el-container> :外層容器,最外層的區塊。

<el-header>:頂端容器,頂端的區塊。

<el-main>:主要區域容器,主要的區塊,大部分子網頁會設定顯示在這。

<router-view>:路由顯示的子網頁會放在這個區塊。

接下來為了方便管理路由,在src底下再新增一個資料夾router,裡面新增 index.js 和 router.js 兩個檔案

index.js:

import Vue from "vue";
import Router from "vue-router";
import routes from "./router";

Vue.use(Router);
const router = new Router({
  routes
});
export default router;

index.js 這邊將vue跟vue-router還有新增的router.js引入進來

router.js:

import layout from "../layout";

至於rouetr.js這邊將layout這一頁引入


接下來新增一個新的頁面,放在src底下,就叫做mypage.vue吧

頁面就先不要寫得太複雜,大概像下面這樣

<template>
    <div></div>
</template>

然後將這一頁加入路由(router)裡面

將router.js改寫成

先將mypage引入

import mypage from "../mypage";

接下來稍微一些複雜

首先先新增一個路由集合

const Routers = {
}

接下來將Layout作為基底頁面

import layout from "../layout";
import mypage from "../mypage";

const Routers = {
  path: "/",
  name: "layout",
  component: layout
};

再將剛剛新增的mypage新增為子頁面,然後將整個路由集合輸出出去

import layout from "../layout";
import mypage from "../mypage";

const Routers = [{
  path: "/",
  name: "layout",
  component: layout,
  children: [
    {
      path: "/mypage",
      name: "mypage",
      component: mypage
    }
  ]
}];
export default Routers;

接下來更改一下App.vue這一頁

我們將之前做的東西剪下貼上到mypage裡面

<template>
  <div id="mypage">
    <el-input v-model="no" placeholder="學號" style="width:180px;"></el-input>
    <el-input v-model="name" placeholder="姓名" style="width:180px;"></el-input>
    <el-input v-model="sex" placeholder="性別" style="width:180px;"></el-input>
    <el-button @click="clickEvent()">按鈕</el-button>
    <el-table :data="tableData">
      <el-table-column prop="tblno" label="學號"></el-table-column>
      <el-table-column prop="tblname" label="姓名"></el-table-column>
      <el-table-column prop="tblsex" label="性別"></el-table-column>
    </el-table>
  </div>
</template>

 <script>
import Vue from "vue";
export default {
  data() {
    return {
      no: 0, //數字格式不用“”括起來
      name: "", //字串格式要用“”括起來
      sex: "",
      tableData: [] //表格資料為一個陣列
    };
  },
  methods: {
    clickEvent() {
      this.tableData.push({
        tblno: this.no,
        tblname: this.name,
        tblsex: this.sex
      });
    }
  }
};
</script>

接下來我們再更改一下layout這一頁

把分頁的連結加進來

<template>
  <div id="app">
    <el-container>
      <el-header class="el-header">我的第一個Vue網頁</el-header>
      <el-container style="height:100%">
        <el-aside class="el-aside menu" style="width: 300px; background-color: aliceblue">
          <div id="aside">
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>分頁</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">
                    <i class="el-icon-user-solid"></i>
                    <a href="/#/mypage">mypage</a>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </div>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Vue from "vue";
export default {
  data() {
    return {};
  }
};
</script>

用的是element-ui 的 el-menu套件

接下來就跑起來看看結果吧

沒有錯誤的話運行起來的畫面大概是長這樣

點下分頁就會將頁面顯示在右方

到此就完成了一個簡單的擁有路由網頁了

需要增加別的頁面就照一樣的模式重複做下去即可


這篇可能比起之前的操作上要複雜許多

一開始可以先用複製貼上做出第一頁

接下來再依樣畫葫蘆做出第二頁、第三頁

如此可以比較快熟悉路由的寫法