路由的基本概念与原理
Vue Router
Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器。
它和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能有:
支持HTML5 历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
vue-router的基本使用
基本使用步骤
1.引入相关的库文件
导入vue文件为全局window对象挂载Vue构造函数
导入vue-router文件，为全局window对象挂载VueRouter构造函数
注意：vue文件一定要在vue-router文件之前导入
2.添加路由链接
router-link 是vue中提供的标签，默认会被渲染为a标签
to属性默认会被渲染为href 属性
to属性的值默认会被渲染为#开头的hash地址
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
3.添加路由填充位
路由填充位(也叫做路由占位符)
将来通过路由规则匹配到的组件，将会被渲染到router-view 所在的位置
<router-view></router-view>
4.定义路由组件
var User = {
template:'<div>User</div>'
}
var Register = {
template:'<div>Register</div>'
}
5.配置路由规则并创建路由实例
//创建路由实例对象
var router = new VueRouter（{
// routes 是路由规则数组
routes: [
//每个路由规则都是一个配置对象， 其中至少包含path和component 两个属性:
// path表示当前路由规则匹配的hash 地址
// component 表示当前路由规则对应要展示的组件
{path: /user ', component: User},
{path:'/ register', component: Register}
]
})
注意：component只接收路由对象，不接受字符串
6.把路由挂载到Vue根实例中
new Vue({
el:'#app',
//为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上
//router:router,在ES6中，如果属性名和属性值的名字是也一致的，可以简写
router
});
