vue路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。Vue.js + vue-router 可以很简单的实现单页应用。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

  1. 创建组件
    首先引入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>'
})
  1. 创建Router

    var router = new VueRouter()
    调用构造器VueRouter,创建一个路由器实例router。

  2. 映射路由

    router.map({
    ‘/home’: { component: Home },
    ‘/about’: { component: About }
    )

调用router的map方法映射路由,每条路由以key-value的形式存在,key是路径,value是组件。
例如:’/home’是一条路由的key,它表示路径;{component: Home}则表示该条路由映射的组件。

  1. 使用v-link命令

>
< div class=”list-group”>
< a class=”list-group-item” v-link=”{ path: ‘/home’}”>Home
< a class=”list-group-item” v-link=”{ path: ‘/about’}”>About

在a元素上使用v-link命令跳转到指定路径。

  1. 使用标签
    在页面上使用标签,它用于渲染匹配的组件。

  2. 启动路由

    var App = Vue.extend({})
    router.start(App, ‘#app’)

路由器的运行需要一个根组件,router.start(App, ‘#app’) 表示router会创建一个App实例,并且挂载到#app元素。