为什么抛弃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
的控制台是支持多种显示风格的,其设定方式如下图所示: