Vue太难啦！从入门到放弃day06——Vue前端路由

一、路由的基本概念和原理

1.1 路由的概念

    路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 
    当我们输入要访问的url地址之后，浏览器要去请求这个url地址对应的资源。
    那么url地址和真实的资源之间就有一种对应的关系，就是路由。
    路由分为前端路由和后端路由。

1.1.1 后端路由

	概念：根据不同的用户 URL 请求，返回不同的内容 
	本质：URL 请求地址与服务器资源之间的对应关系
	后端路由是由服务器端进行实现，并完成资源的分发

1.1.2 前端路由

 	概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系
	前端路由主要做的事情就是监听事件并分发执行事件处理函数
	前端路由是依靠hash值(锚链接)的变化进行实现

二、Vue Router的基本使用

2.1 Vue Router概念

Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 
它和 Vue.js 的核心深度集成，可以非常方便的用于SPA（single page web application,单页应用程序）应用程序的开发。

2.2 Vue Router特性

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

2.3 Vue Router基本使用

2.3.1 引入相关的库文件

<script src="./lib/vue_2.5.22.js"></script>
<script src="./lib/vue-router_3.0.2.js"></script>
注意：要先导入vue库文件，因为vue router是依赖于vue的，顺序不能错

2.3.2 添加路由链接

<router-link>是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性：
to属性的值默认会被渲染为 # 开头的 hash 地址：
        	
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

2.3.3 添加路由填充位（路由占位符）

将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置
<router-view></router-view> 

2.3.4 定义路由组件

const User = {
   
    template: '<h1>User 组件</h1>'
}

const Register = {
   
    template: '<h1>Register 组件</h1>'
}

2.3.5 配置路由规则并创建路由实例

// 创建路由实例对象
var router = new VueRouter({
   
	// routes 是路由规则数组
	routes: [
		// 每个路由规则都是一个配置对象，其中至少包含 path 和 component 两个属性：
		// path 表示当前路由规则匹配的 hash 地址
		// component 表示当前路由规则对应要展示的组件
		{
   path:'/user',component: User},
		{
   path:'/register',component: Register}
	]
})

2.3.6 把路由挂载到 Vue 根实例中

const vm = new Vue