vue-router的基本使用

• 引入相关库文件

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

• 添加路由链接

<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>

• 添加路由填充位

<router-view></router-view>

• 定义路由组件

const User = {
    template: '<h1>User 组件</h1>'
}
const Register = {
    template: '<h1>Register 组件</h1>'
}

• 配置路由规则并创建路由实例

const router = new VueRouter({
    // 所有的路由规则
    routes: [
        { path: '/user', component: User },
        { path: '/Register', component: Register }
    ]
})

• 把路由挂载到Vue根实例中

const vm = new Vue({
    // 指定控制的区域
    el: '#app',
    data: {},
    // 挂载路由实例对象
    // router:router
    router
})