Vue.js的路由之——vue-router快速入门

直接先上效果图

 

这个单页面应用有两个路径：/home和/about，与这两个路径对应的是两个组件Home和About。

 

整个实现过程

JavaScript

1. 建立组件：建立单页面应用须要渲染的组件
2. 建立路由：建立VueRouter实例
3. 映射路由：调用VueRouter实例的map方法
4. 启动路由：调用VueRouter实例的start方法

HTML

1. 使用v-link指令
2. 使用<router-view>标签

router.redirect

应用在首次运行时右侧是一片空白，应用一般都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：

router.redirect({
    '/': '/home'
})

router.redirect方法用于为路由器定义全局的重定向规则，全局的重定向会在匹配当前路径以前执行。

 

执行过程

当用户点击v-link指令元素时，咱们能够大体猜测一下这中间发生了什么事情：

• vue-router首先会去查找v-link指令的路由映射
• 而后根据路由映射找到匹配的组件
• 最后将组件渲染到<router-view>标签

 

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>'
})

2. 建立Router

var router = new VueRouter()

调用构造器VueRouter，建立一个路由器实例router。

3. 映射路由

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

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

4. 使用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指令跳转到指定路径。

5. 使用<router-view>标签

<router-view></router-view>

在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

6. 启动路由

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

路由器的运行须要一个根组件，router.start(App, '#app') 表示router会建立一个App实例，而且挂载到#app元素。注意：使用vue-router的应用，不须要显式地建立Vue实例，而是调用start方法将根组件挂载到某个元素。