02.VueRouter的基本使用

1.引入相关库文件

下面展示一些 vue.js 和VueRouter.js 的引入。

<script src="./node_modules/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2.添加路由连接

#router-link是vue中提供的标签，默认被渲染为a标签
#to属性默认渲染为href属性
#to属性的值默认被渲染为#开头的hash地址

 <router-link to="/login">login</router-link>
 <router-link to="/register">register</router-link>

3.添加路由填充位

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

<!--路由占位符-->
<router-view></router-view>

4.定义路由组件

const login ={
        template:'<h1>登录组件</h1>'
}
const register ={
        template:'<h1>注册组件</h1>'
}

5.配置路由规则并创建路由实例

let router =new VueRouter({
        routes:[
        //path表示当前路由规则匹配到的hash地址
        //component表示路由规则对应的组件
        //path与component都是必须有的
            {path:'/login',component:login},
            {path: '/register',component: register}
        ]
    })

6.把路由挂载到Vue的根实例中

    let vm =new Vue({
        el:"#app",
        router:router
    })

#也可以简写 router：router 为：

    let vm =new Vue({
        el:"#app",
        router
    })

效果展示

…end