- 作用:
在一个系统中往往会有很多的页面组成,在Vue
开发中,这些页面通常使用的是Vue
中的组件来实现的。
当一个页面跳转到另一个页面时,其是通过改变url
路径来实现的,那么这个时候Vue
就需要知道当前url
对应的是哪个组件页面,而控制这个的就是vue-router
控件。
官网
vue-router的官网GitHub
地址为:
这里我使用的是vue-router
的1.0
版本,其地址如下:
vue-router的使用
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<template id="page1">
<h2>页面1</h2>
</template>
<template id="page2">
<h2>页面2</h2>
</template>
<div id="app">
<a href="javascript:void(0)" v-link="{path:'/page1'}">页面1</a> |
<a href="javascript:void(0)" v-link="{path:'/page2'}">页面2</a>
<!--路由占位-->
<router-view></router-view>
</div>
</body>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../js/vue/vue-router/1.0/vue-router.js"></script>
<script type="application/javascript">
//定义路由根组件
var App = Vue.extend({});
//定义page1页面
var page1 = Vue.extend({
template:'#page1'
});
//定义page2页面
var page2 = Vue.extend({
template:'#page2'
});
//设定路由规则
var router = new VueRouter();
router.map({
'page1':{
component:page1
}
,'page2':{
component:page2
}
});
//开启路由
router.start(App,'#app');
</script>
</html>
结果
分析
上面实现的功能是通过点击页面的超链接,通过路由规则,以此来跳转到不同的页面。
通过代码,我们看到,在上面的代码中我们一共定义了三个路由组件,分别是跟路由组件App
,page1
页面组件与page2
页面组件。
其中App
组件是一个空组件,其实现的功能是用于展示其它切换过来的路由页面,该页面通过App
内定义的router-view
占位符进行展示。
page1
页面组件与page2
页面组件都是定义了单一的页面,其主要就是用于展示该页面中的内容。
var router = new VueRouter()
用于创建路由规则,路由页面的跳转是通过路由规则来实现的,在这里,我们可以通过路由规则来匹配超链接中的v-link="{path:'/page1'}"
所指定的路径,进而完成页面的展示。
最后通过router.start(App,'#app');
来开启路由规则,这里需要指明路由的接管区域,也就是说需要指明#app
。
通过上述说明,这样我们就可以通过点击页面中的超链接,进而跳转到所想要展示的页面。