版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83717433
文章目录
- 作用：
在一个系统中往往会有很多的页面组成，在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。
通过上述说明，这样我们就可以通过点击页面中的超链接，进而跳转到所想要展示的页面。