老张跟着老许学前端之vue-router，路由的学习

因为考试的原因，学习前端的步伐慢了三天，学习路由已经是三天前的事情了，今天就把路由的创建和使用写成文章，为了以后的查询和学习。

1、路由的创建：

新建一个vue项目后，打开cscode的终端控制台，输入指令：

yarn add vue-router@4

这样路由就下载好了，但是因为我用的是vue2，所以我下载路由版本应该是：

yarn add vue-router@3

改变版本号，除了在下载的时候注意以外，还可以打开左侧文件的：package.json文件，找到里面的："dependencies": ，然后找到路由，将版本号改成3，然后在终端控制台上面输入：yarn，然后enter确认，就可以改变版本号了。

2、建设路由：

a、工程化、添加路由版块

在左边新建一个文件夹router，在文件夹中新建文件：index.js，然后在文件中添加指令：

import Vue from "vue";  // 固定写法：引入第三方的包
import VueRouter from "vue-router"; // 固定写法：在vue项目中使用vue-router进行管理
import GoTob from "../components/GoTob.vue"; // 引入组件GoTob
import HelloWorld from "../components/HelloWorld.vue"; // 引入组件HelliWorld

Vue.use(VueRouter); // 固定写法

const router = new VueRouter({
        // 1.通过routes添加路由配置，可以添加多个路由配置，routes是一个数组
	routes: [
         // 2.添加单个路由配置，每个路由配置是一个对象，常用的配置项有：
        // path:路由路径
        // component:组件实例，引入组件就会有组件实例
		{
			path: "/", // 主目录
			component: HelloWorld,
		},
		{
			path: "/GoTob", // 剩下目录全部是 /加组件名称
			component: GoTob,
		},
	],
});

export default router; // 将路由的实例导出

b、在左侧文件main.js中注入路由模块，在new Vue中注入路由，让整个应用都有路由功能：

3、在app.vue根组件中添加router-view:

4、在组件中引用router让页面进行跳转：

a、在html代码中添加点击事件：

 <div class="hello">
    <button @click="fromA">点老子去a</button>
  </div>

b、添加完点击事件后，给点击事件赋值：跳转页面：

methods: {
    fromA: function () {
      this.$router.push("/GoTob");
    },
  },

这样，当点击页面中的按钮，点老子去a的时候，他就会跳转到组件GoTob页面中了。