vue2.0和vue1.0路由对比以及脚手架初始路由分析

2.0新版本路由相比1.0在使用上做了一些改动，但核心思想并未改变，接下来稍作分析和对比，使用路由之前都需要引入vue-router.js文件

一、两个路由版本的初步分析

1.0

.js

    /*1.创建根组件 必须得要有一个根组件*/
    var app = Vue.extend();

    /*2.创建路由对象*/
    var router = new VueRouter();

    /3.创建模板 注意通过Vue.extend创建，也可以从外部导入*/
    var home = Vue.extend({
       template:'<h1>首页</h1><p>aaaaa</p>'
    });
    var music = Vue.extend({
        template:'<h1>音乐</h1>'
    });
    var singer = Vue.extend({
        template:'<h1>歌手</h1>'
    });

     /*4.配置路由 每一个锚点对应哪个模板*/
    router.map({ 
        'home':{component:home},  //如果是home锚点。就会把指定的组件，放入到占位符当中
        'music':{component:music},
        'singer':{component:singer}
    });

    /*重定向设置默认跳转路由 这里默认从根路由跳转到路由home*/
    router.redirect({ 
        '/':'/home'
    });

    /*5.开启路由 配置完成路由之后需要手动开启路由*/
    router.start(app,'#app') 注意参数：上面创建的根组件app和要挂载到的html

.html

<div id="app">
    <!--1.设置跳转路由-->
    <li><a v-link="{path:'/home'}">首页</a>