前言
什么是路由？我们创建了页面，页面与页面之间的跳转，这个跳转产生的路径即可狭义地理解为路由。怎么跳转，怎么回去这些都是路由问题。不仅如此，在同一个页面，点击不同的按钮切换不同的显示，也会用到路由。路由与地址栏的变化是一 一对应的。路由的概念一开始出现在后端，因为在之前，渲染的工作基本由后端完成，前端只管发请求，服务器接到请求后根据 url 的不同响应不同的数据。在 ajax 出现后，可以不刷新页面就可以获取数据并呈现，通过监听 url 地址的变化实现页面的切换。
Vue路由
无论什么工具库、框架，都不能脱离标准与规范去设计，这是脱离实际，更是脱离开发者。Vue 这样优秀的框架，自然是建立在规范与标准的基础上。但底层是复杂的，不适合初学者去看。既然是起步，理应只关注应用层面。万丈高楼平地起，基础才是最核心的东西。
基本配置
日常开发都是单文件组件加模块化，秉着实用性要求，本文的说明都是建立在模块化的基础上。首先来看看路由在一个项目里处于什么位置。
在一个项目中，路由都是存放在一个 router 的文件夹下，在这个文件夹下可以做与路由有关的事。熟悉模块化的读者知道，每个文件夹下都有一个 index 文件，这是为了打包工具能够快速找到项目或模块的入口。一般，路由的配置也是在这样一个 index.js 文件里。
配置如下：
// 首先，需要引入 vue 与 vue-router 两个模块，否则无法使用。但在此之前，如果你没有其中的哪个模块，需要先进行下载。
import Vue from 'vue'
import VueRouter from 'vue-router'
// 要使用哪个组件，可以提前在这里引入，路由与组件有对应关系，一般是一 一对应（映射）的。
import Home from '../component/Home'
import About from '../component/About'
// 然后是使用 VueRouter
Vue.use(VueRouter)
// 建立一个 routes 数组用于存放路由对象，path 是路由路径，name 是路由的名字，component 是路由映射的组件。下面是两个例子:
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
// 新建一个 router 作为 VueRouter 的实例对象，用于导出给整个项目使用。router 包含所有的 routes 数组，但一般就一个。注意看下面的代码
const router = new VueRouter({ routes })
// 将 router 实例导出
export default router
找到根目录下的 main.js 文件夹，将 router 引入
import Vue from "vue"
import App from "./App.vue"
// 在这里引入
import router from '../router'
Vue.config.productionTip = false;
new Vue({
router, // 在根实例这里注册使用
render: (h) => h(App),
}).$mount("#app");
<router-link> 与 <router-view>
路由配置好后，到哪里去使用？怎么使用？这时，<router-link> 与 <router-view> 便登场了。<router-link> 是点击路由跳转的，本质是一个 <a> 标签。<router-view> 是路由出口，也就是路由在哪里使用，便在哪里放置一个 <router-view> 标签，Vue 会自动去匹配与之对应的组件。这样说起来不是很好理解，上代码：
// 例如，这两个组件，我希望被渲染到 App.vue 根组件下，便在根组件里放置一个 <router-view> 标签
// 在 App.vue 里的模板的根标签下使用 <router-link> 来控制两个路由组件的切换
<template>
<div id="app">
<router-link to="/home" />
<router-link to="/about" />
<router-view />
</div>
</template>
<router-view> 与 <router-link> 不一定在同一组件下，但一定是同一个页面里，毕竟路由存在的意义就是切换，如果 <router-link> 被点击了却看不到 <router-view> 的位置渲染的组件，这样的设计又有何意义呢？
例如，<router-link> 可以单独放置在某个侧边栏、底部栏里，而 <router-view> 可以放置在显示内容的组件里。在哪里点击，在哪里显示，完全取决于你的业务和设计。但不论如何，万变不离其宗，掌握好基础，再怎么变也不会脱离路由本身的意义和使命。
好了，到这里，路由的起步就算完成了。接下来，就是路由的真正使用了。
