您的位置:首页 > 产品设计 > UI/UE

个人总结: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