什么是路由
路由是根据不同的url地址展示不同的内容或页面。可分为前端路由和后端路由。
后端路由：通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据和模版组合，返回HTML，也可以是直接返回模版HTML，然后由前端再去请求数据，使用前端模版和数据进行组合，生成想要的HTML。（意味着，浏览器刷新页面。网速慢的话说不定屏幕全白再有新内容）
简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。大致流程如下：
- 浏览器发送请求
- 服务器监听到80端口(或443)有请求过来，并解析
url路径 - 根据服务器的路由配置，返回相应信息 (可以是
HTML字符串，也可以是JSON数据，图片等) - 浏览器根据数据包的
Content-Type来决定如何解析数据
前端路由：对于单页面应用程序(SPA)来说，主要通过url中的hash(#号)来实现不同页面之间的切换。同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现。这种切换页面的方式，称作前端路由。
前端路由更多用在单页应用上，也就是SPA。因为单页应用，基本上都是前后端分离的，后端自然也就不会给前端提供路由。在单页应用中，大部分页面结构不变，只改变部分内容的使用。
优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户
缺点：使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存。在单页应用中无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置。
前端路由两种模式
hash 模式： 通过改变url上的hash值，监听onhashchange事件，优点是可以兼容低版本浏览器，缺点是太丑。如：http://www.xxx.com/#/login
history 模式： 通过HTML5的historyAPI，监听popState事件，通过pushState和replaceState这两个API可以改变url地址且不会发送请求。用HTML5实现的单页路由的url就不会多出一个#，变得更加美观。因为没有#号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种请，所以这个实现需要服务器的支持，需要把所有的路由都重定向到跟页面。如：http://www.xxx.com/login
前端渲染
是指后端返回JSON数据，前端利用预先写好的HTML模版，循环读取JSON数据，拼接字符串(ES6的模版字符串特性大大减少了拼接字符串的成本)，并插入页面。
优点：网络传输数据量小。不占用服务端运算资源(解析模版)，模版在前端，修改结构改变交互都前端自己来了，改完自己调就行。
缺点：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模版。SEO友好度：差，大量使用ajax，多数浏览器不能抓取ajax数据。
后端渲染
前端请求，后端用后台模版引擎直接生成html，前端接受到数据之后，直接插入页面。
优点：前端耗时少，减少了首屏时间，模版统一在后端。不占用客户端运算资源。SEO友好度： 好
缺点：占用服务器资源
vue-router使用步骤
第一步：安装vue-router库
npm install vue-router --save
第二步：如果在一个模块化工程中使用，必须要通过Vue.use()明确地安装路由功能
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装Vue-router
Vue.use(VueRouter);
</script>第三步：创建 router实例，设置routes配置
<script>
// 定义路由组件
const Login = {
template: '<p>登录组件</p>'
}
const Register = {
template: '<p>注册组件</p>'
}
// 设置路由配置
const routes = [
{ path: '/login', component: Login },
{ path: '/register', component: Register }
]
// 创建 router 实例
const router = new VueRouter({
routes // 传入路由配置
});
</script>第四步：在vue根实例配置选项中通过router配置参数注入路由。在任何组件内通过this.$router访问路由器，可以通过this.$route访问当前路由
<script>
// 创建vue实例并挂载，注入路由
new Vue({
router
}).$mount('#app');
</script>第五步：在组件中添加路由出口
<div id="app">
<!-- 使用 router-link 组件来导航 -->
<router-link to="/login">Login</router-link>
<router-link to="/register">Register</router-link>
<!-- 添加：路由出口 - 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>this.$router 和 this.$route 的区别
$route:为当前路由跳转对象，可以获取当前路径中的参数，可以通过watch监听路径的变化
$router:为VueRouter实例，想要导航到不同URL，则使用$router.push()方法，主要用作于编程式导航
原文地址：https://www.cnblogs.com/yuxi2018/p/11967248.html