Vue2学习之旅二：添加路由vue-router

做者：心叶
时间：2018-04-26 09:26

本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V2

Vue2学习之旅系列文章目录

前一篇咱们已经搭建了一个看起来有点不高大上的架子，为了后续学习的方便，这里想先提早把路由说一下，之后一个知识点一个页面，路由切换，是否是很舒服。

首先，咱们仍是来看看此次咱们的项目目录结构变成什么样子了，以下图：

准备工做

此次咱们新添加的文件只有PageOne.vue和PageTwo.vue，以及router/index.js。

router/index.js先无视，先让咱们看看前面二个存在的意义。

PageOne.vue和PageTwo.vue是什么，前面一篇文章Vue2学习之旅一：初始化项目搭建已经说清楚了，在这里你能够就先简单的认为就是渲染和控制页面中一小块区域（固然也能够是整个页面）的东西，本篇路由跳转就是经过指定一小块区域，经过修改路由来肯定是PageOne.vue仍是PageTwo.vue来管理这块区域。让咱们简单看看他们二个里面的内容。

PageOne.vue里面的内容：

<template>
    <span>
        这是页面一
    </span>
</template>

PageTwo.vue里面的内容：

<template>
    <span>
        这是页面二
    </span>
</template>

这样，咱们就准备好了二个页面。

了解路由的人应该都知道，路由就比如一种状态的切换，好比你点击了一个按钮，若是你没有注册按钮的点击事件，你的点击不会触发你想要的事情的发生。

所以，路由跳转以后，若是咱们想要页面中指定的一块区域切换用PageOne.vue和PageTwo.vue来管理，就须要配置好路由状态改变的对应事件，这就是咱们接下来的事情。

安装Vue路由

Vue路由是一个独立的模块，所以，和咱们用到vue时同样，咱们须要安装他，你应该在package.json中添加下面内容（其实就是在以前安装的vue下面添加那一行vue-router就行了）：

"dependencies": {
    "vue": "^2.2.6",
    "vue-router": "^3.0.1"
}

而后，别忘了在命令行执行：

npm install

此时，你就安装好了咱们的vue-router

配置Vue路由

路由安装好了以后，具体路由跳转到某个状态的时候，页面中的那一小块此刻应该由PageOne.vue和PageTwo.vue之中的谁来管理，这须要提早配置好，否则路由可不知道你想干什么，所以，咱们须要编辑开始被无视的router/index.js文件，路由就是在这里配置的。

先让咱们来看看最终里面的内容：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//路由跳转的组件，要提早注入
import PageOne from '../components/PageOne.vue';//【地方一】
import PageTwo from '../components/PageTwo.vue';

//路由配置
const router = new VueRouter({
    routes: [{
        path: '/',//【地方二】
        redirect: 'PageOneLink'
    },
    {
        path: '/PageOneLink',//【地方三】
        component: PageOne
    },
    {
        path: '/PageTwoLink',//【地方四】
        component: PageTwo
    }
    ]
});

export default router;

具体的细节你能够之后学会了慢慢体会，此时，我先告诉你几个你应该知道是重点：

1.开始咱们引入了vue-router，由于配置路由只有他本身知道怎么配置，所以引入是必须的；

2.在【地方一】处，咱们引入了以前一直耿耿于怀的二个组件，因为后续要指定跳转谁，此处先引入；

3.前面的都是准备工做，后面的就是真的配置了，先看【地方三】，咱们配置了若是路由状态是PageOneLink的话那块区域由PageOne.vue管理，【地方四】就不言而喻了；

4.最后还有【地方二】，因为刚刚打开一个页面的时候，路由应该是什么状态都不是，这里就是配置此时自动跳转到状态PageOneLink。

OK?到这里结束都不难理解吧！想想，是否是只差最后一步了：使用这个配置好的路由，来让他帮助咱们控制页面中每一块。

使用路由

首先，谁使用路由？固然须要他的Vue对象了，咱们这里就是根对象（也就是entry.js里面新建的那个），所以，先看看修改后的entry.js:

import Vue from 'vue';
import App from './App.vue';

// 1.引入刚刚配置的路由（router/index.js）
import router from './router';

//根对象
var vm = new Vue({
    //挂载点
    el: '#root',
    //2.使用刚刚的路由配置
    router: router,
    //启动组件
    render: function (callback) {
        return callback(App);
    }
});

仔细对比以前的文件，是否是就多了二行代码（我方便备注1.和2.的地方），应该不用多说了吧！

此时，已经使用了，但是，别忘了，还有一件事情，路由跳转以后，应该控制页面里面的哪一块区域？这也须要指定好。

因为咱们的是给根Vue对象使用，能够在他使用的组件App.vue里面配置，仍是先开卡App.vue此刻被改为什么了再说说具体内容：

<template>
    <section>
      <header>
        {{msg}}
      </header>
      <ul>
      <!--路由导航【地方一】-->
        <li>
          <router-link to="/PageOneLink">页面一</router-link>
        </li>
        <li>
          <router-link to="/PageTwoLink">页面二</router-link>
        </li>
    </ul>
    <!--路由跳转视图【地方二】-->
    <router-view></router-view>
    </section>
</template>

<script>
export default {
  data() {
    return {
      msg: "vue.quick - 基本版本代码"
    };
  }
};
</script>

能够对比一下，主要就是修改了template里面的内容，添加的地方有二处：

1.先看【地方二】，这个是必须的，也就是知道控制页面里的哪一块区域，没错，就是这里占位的地方；

2.接着是【地方一】，地方一简单的理解就是页面的二个按钮，你点击其中每个，就会跳转到对应的状态，和前面的路由配置对应。

如今，启动项目，页面访问的时候应该就能够看见下面的效果：

这样，路由就简单的完成了。

页面美化（能够无视此段）

为了之后添加新的练习页面的时候，比较好看，建议你能够在App.vue里面的style标签中添加下面的样式：

html {
  font-size: 100px;
}
body {
  margin: 0;
}
header {
  font-size: 0;
}
ul {
  background-color: black;
  font-size: 0;
  line-height: 0.4rem;
  padding: 0 0.3rem 0 0.3rem;
}
ul > li:not(:last-child) {
  margin-right: 0.1rem;
}
ul > li {
  font-size: 0.16rem;
  display: inline-block;
}
ul > li > a:hover {
  color: rgb(240, 227, 227);
}
ul > li > a.router-link-active {
  color: #fff;
  outline: none;
}
ul > li > a {
  color: #60818e;
  text-decoration: none;
}

此时页面的截图：

总结

路由的基本用法就这些了，后续对于高级用法若是有添加会新写一篇文章，本系列就是按部就班的系列，但愿路由你理解了，祝你好运！