不管怎样，生活还是要继续向前走去。有的时候伤害和失败不见得是一件坏事，它会让你变得更好，孤单和失落亦是如此。每件事到最后一定会变成一件好事，只要你能够走到最后。纸上得来终觉浅，绝知此事要躬行。
vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：
- 准备一个根组件 vue.extend()；
- 需要做路由的内容准备 template；
- 准备路由 new VueRouter（）；
- 关联路由 map
- 启动路由 start(App,'#box')；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中
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>
到此这篇关于vue-router单页面路由就介绍到这了。最可怕的敌人，就是没有坚定的信念。更多相关vue-router单页面路由内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
