码迷,mamicode.com
首页 > 其他好文 > 详细

Vue路由器的简单实现

时间:2018-09-01 20:25:12      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:bow   简单   设置   bower   art   var   link   lan   简单实现   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:‘/home‘}">主页</a>
</li>
<li>
<a v-link="{path:‘/news‘}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>

<script>
//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‘);

//6. 跳转
router.redirect({//设置跳转页面
‘/‘:‘home‘
});
</script>
</body>
</html>

Vue路由器的简单实现

标签:bow   简单   设置   bower   art   var   link   lan   简单实现   

原文地址:https://www.cnblogs.com/zhangzhiqin/p/9571340.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!