个人总结:vue1.0与2.0中路由的区别
个人github:https://github.com/qiilee 欢迎followvue1.0写法:html:<a v-link="{path:'/home'}">主页</a>跳转链接展示内容:<router-view></router-view>js://1.
·
个人github:https://github.com/qiilee 欢迎follow
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
更多推荐
已为社区贡献13条内容
所有评论(0)