vue之路由写法变化

关键词：路由

1.0的写法

    <div id="box">
        <ul>
            <li><a v-link="{path:'/way'}">安装</a></li>
            <li><a v-link="{path:'/dir'}">目录</a></li>
        </ul>
        <div>
           <router-view></router-view>                  
        </div>
    </div>

     var App = Vue.extend();

     var Ways = Vue.extend({
        template:"<h3>node安装方法</h3>"
     });
     var Dirs = Vue.extend({
        template:"<h3>node安装目录</h3>"
     });
     // 准备路由
     var router = new VueRouter();
     // 关联
     router.map({
        "way":{
            component:Ways
        },
        "dir":{
            component:Dirs
        },
     });
     router.start(App,"#box");
        //6. 跳转
        router.redirect({
            '/':'dir'
        });

2.0写法
* <script src="https://unpkg.com/vue/dist/vue.js"></script>
* <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <div id="box">
        <ul>
    <router-link to="/way">方法</router-link>
    <router-link to="/dir">目录</router-link>
        </ul>
        <router-view></router-view>
    </div>

  // 定义组件
  const Ways = { template: '<div>安装方法</div>' }
  const Dirs = { template: '<div>安装目录</div>' }

  // 准备路由
   const routes = [
        { path: '/way', component: Ways },
        { path: '/dir', component: Dirs }
      ]
   // 创建实例
   const router = new VueRouter({
      routes // （缩写）相当于 routes: routes
   });
   // 挂载实例
   new Vue({
    el:'#box',
     router
   });