这篇文章主要为大家详细介绍了vue-router单页面路由,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
vue中,有一个类库叫做vue-router,是用来做单页面路由的。做路由一般分为四个步骤:
github上vue-router下载地址:https://github.com/vuejs/vue-router
关于路由跳转的简单代码如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>
<title></title>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">我是第一个a</a>
</li>
<li >
<a v-link="{path:'news'}">我是第二个a</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
</body>
<script>
//1.准备一个根组件
var App=Vue.extend();
//2.Home News 组件准备
var Home=Vue.extend({
template:'<h3>我是第一个a的内容页</h3>'
});
var News=Vue.extend({
template:'<h3>我是第二个a的内容页</h3>'
})
//3.准备路由
var router = new VueRouter();
//4.关联
router.map({
'home':{
component:Home
},
'news':{
component:News
}
})
//5.启动路由
router.start(App,'#box');
</script>
</html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/3399-0.html
注:关于vue-router单页面路由的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。