Vue-router 的基本使用步骤

基本使用步骤

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
})

自我激励

无论正在经历什么，都请不要轻言放弃，因为从来没有一种坚持会被辜负。谁的人生不是荆棘前行，生活从来不会—蹴而就，也不会永远安稳，只要努力，就能做独一无二平凡可贵的自己。