在 vue 中使用 vue-router

  • 导入 vue-router 组件类库:
    
  • 使用 router-link 组件来导航
    登录
    注册
  • 使用 router-view 组件来显示匹配到的组件
    
  • 创建使用Vue.extend创建组件
 		// 4.1 使用 Vue.extend 来创建登录组件
        var login = Vue.extend({
          template: '

登录组件

' }); // 4.2 使用 Vue.extend 来创建注册组件 var register = Vue.extend({ template: '

注册组件

' });
  • 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
    // 5. 创建一个路由 router 实例,通过 routers 属性来定义路由匹配规则
        var router = new VueRouter({
          routes: [
            { path: '/login', component: login },
            { path: '/register', component: register }
          ]
        });
  • 使用 router 属性来使用路由规则
    // 6. 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          router: router // 使用 router 属性来使用路由规则
        });

你可能感兴趣的:(前端)