为什么抛弃1.0版本
之前使用的Vue版本为v1.0.20而对其支持的比较好的Vue Devtools版本也往往不是最新版，比如说之前我在调试Vue的1.0版本时使用的Vue Devtools版本号为3.1.6，但是在GitHub上我们下载并安装的Vue Devtools其实已经摒弃了1.0版本，因而我们在使用新版本的Vue Devtools调试1.0版本的Vue代码时是没有效果的。而这也就是为什么我要在后续的代码中彻底抛弃1.0版本而选用2.0版本的根本原因。
而在之前的代码中，我们却写了很多的1.0版本中的代码，这个在以后貌似就没有什么用处了，其实不然。之前的1.0版本可以作为后续的2.0版本的一个过渡，其也是有相应的实际意义的，因为我们如果不知道其从哪里来，就很难理解其要向何处去的问题。
软件版本
更新前
- Vue.js:
v1.0.20 - vue-router:
v0.7.13 - Vue Devtools：
3.1.6
更新后
- Vue.js:
v2.2.6 - vue-router:
v2.3.1 - Vue Devtools：
5.0.0 beta 3
示例
源码
为了比较方便的进行过渡，我这里的示例是在之前一篇文章中源码的基础上进行软件版本升级，修改代码之后做出来的，之前的文章如下：
修改后的源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<template id="page1">
<div>
<h2>页面1</h2>
</div>
</template>
<template id="page2">
<h2>页面2</h2>
</template>
<div id="app">
<router-link to="/page1">页面1</router-link> |
<router-link to="/page2">页面2</router-link>
<!--路由占位-->
<router-view></router-view>
</div>
</body>
<script src="../../../js/vue/vue/2.0/vue.js"></script>
<script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
<script type="application/javascript">
//定义路由根组件
var App = Vue.extend({});
//定义page1页面
var page1 = Vue.extend({
template:'#page1'
});
//定义page2页面
var page2 = Vue.extend({
template:'#page2'
});
//设定路由规则
var router = new VueRouter({
routes:[
{path:'/page1',component:page1}
,{path:'/page2',component:page2}
]
});
//开启路由
new Vue({
el:'#app'
,router:router
});
</script>
</html>
运行结果
分析
由于上面的代码是在前一篇文章代码的基础上升级而来的，因而代码功能上我就不用多说，直接说起与之前代码的不同之处吧。
在新软件版本中，之前的a标签变更成了现在的router-link标签，该标签的最大优点是省去了a标签自带的点击响应事件，因而我们在此处再也不用添加href="javascript:void(0)"了。
除此之外，由于该标签专门为Vue的超链接而打造的，因而其本身就可以区别于其它标签，因而我们在调用其路由时，没有必要再去采用v-link，而是将其变更成了to，跳转的超链接由之前的v-link="{path:'/page1'}"简化成了to="/page1"因而我们可以看到，新版本的软件使用时，在操作上明显要比之前的老版本更加的简化。
在路由规则与开启路由方面，更新的代码不再采用router.map({})的方式，而是采用新的new VueRouter({routes[]})而这也为后面开启复杂的路由规则预留出了操作空间。
最后再说一下Vue控制台风格与样式的设定。我们在上面的截图中明显的可以看到，此时我的Vue的控制台风格与此前明显不同，而Vue的控制台是支持多种显示风格的，其设定方式如下图所示：
