个人总结:vue1.0与2.0中路由的区别
2017-06-05 17:07
731 查看
vue1.0写法: html: <a v-link="{path:'/home'}">主页</a> 跳转链接 展示内容: <router-view></router-view> js: //1. 准备一个根组件 var App=Vue.extend(); //2. Home News组件都准备 var Home=Vue.extend({ template:'<h3>我是主页</h3>' }); var News=Vue.extend({ template:'<h3>我是新闻</h3>' }); //3. 准备路由 var router=new VueRouter(); //4. 关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 启动路由 router.start(App,'#box'); 跳转: router.redirect({ ‘/’:'/home' }); ---------------------------------------------------------- vue2.0写法:
1. 布局 <router-link to="/home">主页</router-link> <router-view></router-view> 2. 路由具体写法 //组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻</h3>' }; //配置路由 const routes=[ {path:'/home', componet:Home}, {path:'/news', componet:News}, ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' }); 3. 重定向 之前 router.rediect 废弃了 {path:'*', redirect:'/home'}
如有建议,敬请评论!!!
个人邮箱:qiilee@126.com
相关文章推荐
- Vue 2.0初学后个人总结及分享
- Vue 2.0初学后个人总结及分享
- Vue 2.0初学后个人总结及分享
- vue1.0与vue2.0对于v-for的使用的区别
- Vue 2.0初学后个人总结及分享
- 前端些事之vue1.0和vue2.0的区别
- vue学习笔记之vue1.0和vue2.0的区别介绍
- Vue 笔记三:Vue2.0与1.0的区别
- Vue 2.0初学后个人总结及分享
- vue1.0与2.0区别之生命周期
- vue1.0与vue2.0区别之组件通信
- vue1.0和vue2.0的区别之路由
- vue2.0与1.0的区别
- Vue 2.0初学后个人总结及分享
- Vue2.0与1.0的区别
- 列表渲染 Vue2.0与Vue1.0的区别
- vue.js学习:1.0到2.0的变化(区别)
- 转:Asp.net1.0 升级 ASP.NET 2.0 的几个问题总结
- Asp.net1.0 升级 ASP.NET 2.0 的几个问题总结
- 话里话外:流程2.0与流程1.0的区别 推荐