vue 中一些简写之 route

1. 路由简写

// 3. 创建一个路由对象
    var router = new VueRouter({
      routes: [ // 路由规则数组
        { path: '/', redirect: '/login' },  // 路由根本录重定向
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相关的类
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });

1.1完整代码如下

 <div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!-- 容器 -->
    <router-view></router-view>

  </div>

  <script>
    // 2. 创建子组件
    var login = {
      template: '<div>loginnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn。</div>'
    }

    var register = {
      template: '<h3 class="myactive">registerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr。</h3>'
    }

    // 3. 创建一个路由对象
    var router = new VueRouter({
      routes: [ // 路由规则数组
        { path: '/', redirect: '/login' },  // 路由根本录重定向
        { path: '/login', component: login },
        { path: '/register', component: register }   // 注意这里的组件是 组件模板对象，并不是组件的引用名称
      ],
      linkActiveClass: 'myactive' // 和激活相关的类
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>

2路由步骤

• 1.导入路由包
• 2.定义子组件
• 3. 创建路由对象
• 4.得到vm 并把路由挂在上