前端路由与后端路由的区别及SPA的前端路由(主要记录Vue-router)

后端路由

在没有出现ajax技术，前后端还没有分离的时候，往往我们通过浏览器访问一个网址时，后端会返回对应网址的完整页面(html+css+js)，也就是说我们看到的页面，在后端就已经长这样了。
那么当一个网站的页面多达几十上百个的时候，对这些网址(路径)的请求，就需要组织管理起来，对指定的请求路径返回指定的网页，这就是后端路由

前端路由

而出现ajax技术以后，前后端迅速的分离并兴起了SPA(单页面富应用)，后端主要负责提供接口，前端主要负责页面渲染。我们看到的页面是在前端生成的。
主要流程是这样，由前端通过ajax请求接口，后端返回对应的数据，前端拿到数据以后，再结合对应模版跑一些js来生成dom，因此页面的呈现变成了前端的事情，由前端来决定哪个请求路径显示哪个页面。同样当页面逐渐变多的时候我们也需要管理，这就成了前端路由

SPA单页面富应用

在访问SPA时，会直接请求下来全部的前端文件，然后根据路由选择性的渲染呈现。
因此，在访问其他路由时，网页不会刷新，因为所有的前端文件(html+css+js)在第一次时已经请求下来了不需要再请求(前端使用Ajax与后端交互的请求例外)，前端会监听路由的变化，并且切换页面的显示

那么怎么做到路由改变而浏览器不刷新呢？

// 方法一：改变location.hash
location.hash = 'foo'

// 方法二：改变history对象
// 向栈顶推入记录
history.pushState({
   }, '', 'home')
// 或者
// 替换栈顶记录
history.replaceState({
   }, '', 'home')

这两种方法都不会使浏览器刷新（页面没有重新加载）

// 扩充history的其他方法
history.back() 	// 后退一个页面
// 相当于
history.go(-1)

history.forward() // 前进一个页面
// 相当于
history.go(1)

Vue-router

安装

npm install --save vue-router

	// 目前使用的版本
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"

起步

1.创建router对象

按照使用习惯，建立以下文件结构

/src
	/router
		-index.js

然后在index.js中配置路由相关信息

import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

export default new VueRouter({
   
    // 配置路由和组件之间的映射关系
    routes: [

    ]
})

接着在main.js中导入使用

import Vue from 'vue'
import App from './App'
import router from './router'

new Vue({
   
  el: '#app',
  router,
  render: h => h(App)
})

2. 配置映射关系

• 为了可以映射关系，我们先创建两个组件，结构如下

/src
	/components
		/about
			-About.vue
		/home
			-Home.vue

内容如下

<!-- Home.vue -->
<template>
  <div>
      <h1>我是Home</h1>
  </div>
</template>
<script>
export default {
    
  name: 'Home',
}
</script>

<!-- About.vue -->
<template>