路由的基本概念与原理
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
});