了解一下最浅层的vue 路由(router)的使用

Vue Router 是 Vue.js 官方的路由管理器，或者说是SPA（单页应用）的路径管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

实现原理:

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。
1）Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 
hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，
也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；
同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；
所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据。
hash 模式的原理是 onhashchange 事件(监测hash值变化)，可以在 window 对象上监听这个事件。

2）History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: 'history'",
这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。
这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。
只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

安装:

1.第一种 直接下载/CDN
2. https://unpkg.com/vue-router/dist/vue-router.js
3. npm install vue-router

使用

import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue";
Vue.use(VueRouter)
const routes = [ 
	{
	//配置路经
	 path: "/",
     name: "Home",
     component: Home,
	}
];
const router = new VueRouter({
  routes,
});
export default router;

在组件内使用:

<router-link> 进行跳转 会生成a链接 to=‘要跳转的地址’

 <router-link to="/">Home</router-link>

< router-view>进行渲染

 <router-view></router-view>

总结:这些就是路由最浅层的东西,预知深层知识,请听下回分解…