文组也能看得懂的网页前端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套件

接下来就跑起来看看结果吧

没有错误的话运行起来的画面大概是长这样

点下分页就会将页面显示在右方

到此就完成了一个简单的拥有路由网页了

需要增加别的页面就照一样的模式重複做下去即可

这篇可能比起之前的操作上要複杂许多

一开始可以先用複製贴上做出第一页

接下来再依样画葫芦做出第二页、第三页

如此可以比较快熟悉路由的写法