基本使用步骤
1.引入相关的库文件
- 两者的调用顺序不能颠倒
//导入vue文件,为全局window对象挂载Vue构造函数
<script src="./lib/vue_2.5.22.js"></script>
//导入vue-router文件,为全局window对象挂载VueRouter构造函数
<script src="./lib/vue-router_3.0.2.js"></script>
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}
]
})
6.把路由挂载到Vue根实例中
new Vue({
el:'#app',
//为了能够让路由规则生效,必须把路由对象挂载到vue实例对象上
router
})
自我激励
无论正在经历什么,都请不要轻言放弃,因为从来没有一种坚持会被辜负。谁的人生不是荆棘前行,生活从来不会—蹴而就,也不会永远安稳,只要努力,就能做独一无二平凡可贵的自己。