这一章节我们正式进入vue的周边生态vue-router，正式进入真实项目中学习，串联起之前的所有知识！ 如果你还没有创建项目，请看上一张veu/cli相关知识！或者关注CRMEB掘金号查看vue系列文章，我们一起学习，在技术的世界互相碰撞交流！

Vue Router将分为两个部分：

1. Vue Router基本使用（本篇）
2. Vue Router动态传参及导航守卫（下篇）

什么是vue-router?

官方解释： vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

history和锚链接的概念这里不做过多解释，在vue里的表现形式就是链接里有没有#号的区别，但其内在肯定是有不同的，具体大家有兴趣可自行去了解下，我这里要说的是，上边提到了一个路由的概念，那么什么是路由？

什么是路由？

路由一词相信生活中常听到的就是路由器，一个路由器可以连接多台电脑，供多台电脑同时联网，这是因为路由器可以生成多个网络地址，一个网络地址对应一台电脑，这就构成了一个端到端的网络路径！

web里的路由原理也是类似的，根据URL来将请求分配到指定的一个‘端’，那么在vue里充当这个端的就是组件。简单理解下路由的概念就是这样，具体专业的解释，大家可以去百度百科了解下，这里就不做过多专业名词的搬运，希望通过我的理解能给大家带来一些启发！

VueRouter的基本配置

在上一章我们通过vue-cli创建项目的时候，我们已经勾选默认安装了vue-router,在项目的src文件夹下有个router的文件夹，文件夹内部有个index.js的文件，这里放的就是vue-router相关配置的地方：

通过这个我们就可以梳理出一个简单的vue-router的使用流程，当然，如果你通过vue-cli创建项目时默认勾选，那以下步骤都可以省略！

1. 安装vue-router

npm install vue-router

2. 在src文件夹下创建一个router文件夹，再在其内部创建一个index.js文件,引入如下内容:

// src/router/index.js

// 1. 引入vue和VueRoter
import Vue from "vue";
import VueRouter from "vue-router";
// 这里引入的Home是我们提前在views文件夹下创建的组件
import Home from "../views/Home.vue";

// 2. 注册VueRoter
Vue.use(VueRouter);

// 3. 创建一个VueRouter对象
const routes = [
  {
    path: "/",  // 路由的路径
    name: "Home", // 组件名称
    component: Home  // 关联的组件名称
  },
  {
    path: "/about",
    name: "About",
    // 路由的懒加载写法，该组件会被延迟加载，推荐这样写
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

// new一个VueRouter
const router = new VueRouter({
  mode: "history",   // 指定用什么方式跳转路由
  base: process.env.BASE_URL,
  routes
});

// 4. 导出router对象
export default router;

3. 在入口文件main.js中注册router

// main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";  // 导入router

Vue.config.productionTip = false;

new Vue({
  router,    // 注册router
  render: h => h(App)
}).$mount("#app");

经过以上三个步骤就正式在项目中引入了vue-router,在代码中我都做了注释，大家看着注释了解下！其实当安装完vue-router,也就是步骤一之后，我们还可以通过一个命令自动帮我们引入这些，但前提是你必须实现备份原来的，否则会覆盖！

vue add router

VueRouter的基本使用

1. 基本使用

老规矩，翠花上代码：

<!-- src/App.vue -->
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

这是vue-cli创建项目的时候默认在App.vue入口文件中自动生成的，可以看出，VueRouter 通过 router-link 组件来进行导航，通过 to 属性指定导航的链接，<router-link> 默认会被渲染成一个 <a> 标签。然后声明了一个router-view组件作为路由的出口，路由匹配到的组件将渲染到 <router-view></router-view> 标签中。

那么这两个路由地址其实对应的就是我们在router/index.js中的routes中指定的路由列表！

2. 代码方式跳转

以上例子还可以通过编码的方式使用路由！

老规矩，翠花上代码：

<!-- src/App.vue -->
<template>
  <div id="app">
    <div id="nav">
    <!--
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      -->
      <button @click="homeClick">首页</button>
      <button @click="aboutClick">关于</button>
    </div>
    <router-view/>
  </div>
</template>


<script>
export default {
  name: 'App',
  // 代码方式跳转
  methods: {
    homeClick(){
     // this.$router.push('/') 
      this.$router.replace('/')
    },
    aboutClick(){
     // this.$router.push('/about')
      this.$router.replace('/about')
    }
  },
}
</script>

路由还可以通过在methods中定义一个方法来跳转路由，采用this.$router.push()或this.$router.replace()的方式注册!

• 区别：

? $router.push(); 本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录!

? $router.replace(); 替换路由，没有历史记录，点击返回，会跳转到上上一个页面!