[vue路由的使用]
ue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版。乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-webpack-simple模板构建的。
第一个单页面应用(01)
现在我们以一个简单的单页面应用开启vue-router之旅,这个单页面应用有两个路径:/home和/about
,与这两个路径对应的是两个组件Home和About。
- 创建组件
首先引入vue.js和vue-router.js:
<script src="js/vue.js"></script><script src="js/vue-router.js"></script>
然后创建两个组件构造器Home和About:
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
}) - 创建Router
var router = new VueRouter()
调用构造器VueRouter,创建一个路由器实例router。 - 映射路由
router.map({ '/home': { component: Home }, '/about': { component: About }})
调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。例如:'/home'是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件。 - 使用v-link指令
<div class="list-group">
<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>
在a元素上使用v-link指令跳转到指定路径。 - 使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view></router-view>
标签,它用于渲染匹配的组件。 - 启动路由
var App = Vue.extend({})router.start(App, #app')
路由器的运行需要一个根组件,router.start(App,'#app')
表示router会创建一个App实例,并且挂载到#app元素。注意:使用vue-router的应用,不需要显式地创建Vue实例,而是调用start方法将根组件挂载到某个元素。