Vue中的vue-router
文章目录
- 官网
- vue-router的使用
- 源码
- 结果
- 分析
作用：
在一个系统中往往会有很多的页面组成，在Vue开发中，这些页面通常使用的是Vue中的组件来实现的。
当一个页面跳转到另一个页面时，其是通过改变url路径来实现的，那么这个时候Vue就需要知道当前url对应的是哪个组件页面，而控制这个的就是vue-router控件。
官网
vue-router的官网GitHub地址为：
- vue-router
这里我使用的是vue-router的1.0版本，其地址如下：
- 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。
通过上述说明，这样我们就可以通过点击页面中的超链接，进而跳转到所想要展示的页面。
怼烎@
忘是亡心i
╰半橙微兮°
ゞ 浴缸里的玫瑰
还没有评论，来说两句吧...