【vue-router】从vue1到vue2的路由

原创 amandakelake 随笔 框架与工具 405阅读 2017-05-20 17:38:09 举报

vue1和vue2的路由使用有非常多的不同之处,单单靠官方文档上面的说明,新手应该会走比较多弯路,特别是没有人指点的情况下
我自己在跟着学一个vue案例的时候,在路由这一块花了大半天,查了各种资料和前人的笔记,才把1和2版本的区别搞清楚,都是细节,细节,细节……
先上例子图,分布点击三个标签,下方内容区域会变

【vue-router】从vue1到vue2的路由

【vue-router】从vue1到vue2的路由

【vue-router】从vue1到vue2的路由

有两个部分的不同,一个是标签部分,二是JS部分

标签:(这里的标签的意思是写在app.vue文件里面)
从下面的代码可以看出来,vue1版本是用a标签,通过v-link属性触发路由;
vue2版本是用过router-link标签,同to属性指定路径
<router-view></router-view>是内容的显示区域,两个版本是一样的
另外,vue1版本是通过router.map()这个api来配置路由的,但现在通过vue-cli+webpack生成的项目,已经不能使用了,会报错,说找不到这个方法,当然,网上也有大神给出了兼容1版本的方法,不过我想有点多此一举了,用了2还会用1吗?

html 代码

JS部分,先上代码
javascript 代码

我自己写的时候调整了好多遍才成功,下面是我自己出错最多的几个小细节,希望同学们借前车之鉴,以景自身
1、引入的时候,这两句代码中的“Router”是对应的,而且要大写;也有是写成Vue-Router的,反正要对应过来
javascript 代码

javascript 代码

2、引入定义组件的时候,路径一定要写对,要搞清楚'/' './' '../'三个路径写法的区别
javascript 代码

3、定义路由组件和创建router实例的时候,routes要对应
javascript 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复