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方法将根组件挂载到某个元素。

 

相关文章