直接先上效果图

这个单页面应用有两个路径:/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方法将根组件挂载到某个元素。

Vue.js的路由之——vue-router快速入门的更多相关文章

  1. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  2. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  3. Vue.js——60分钟webpack项目模板快速入门

    概述 browserify是一个 CommonJS风格的模块管理和打包工具,上一篇我们简单地介绍了Vue.js官方基于browserify构筑的一套开发模板.webpack提供了和browserify ...

  4. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  5. Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  6. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  7. Vue.js是什么,vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  8. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  9. 【Vue.js游戏机实战】- Vue.js实现大转盘抽奖总结

    大家好!先上图看看本次案例的整体效果. 实现思路: Vue component实现大转盘组件,可以嵌套到任意要使用的页面. css3 transform控制大转盘抽奖过程的动画效果. 抽奖组件内使用钩 ...

  10. 【Vue.js游戏机实战】- Vue.js实现九宫格水果机抽奖游戏总结

    大家好!先上图看看本次案例的整体效果. 完整版实战课程附源码:[Vue.js游戏机实战]- Vue.js实现九宫格水果机抽奖 实现思路: Vue component实现九宫格水果机组件,可以嵌套到任意 ...

随机推荐

  1. 【转发】jquery实现自动打开新的页签

    通常我们想要浏览器在回调方法中打开一个页签,用这个方法 //window.open("http://www.baidu.com") ;       //自动打开新窗口,会被浏览器拦 ...

  2. MYSQL报错:1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column

    1055 - Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'rpa ...

  3. ios 打包相关的那些报错

    这张图片是因为打包bitcode的时候出现了失败,重新打包即可 这个是因为电脑容量不足导致的无法启动模拟器,这个经常发生在128g的电脑并且同时开启多个模拟器的情况下 打完包后,苹果会给你发邮件告诉你 ...

  4. 如何将业务代码写得像诗一样(使用注解+单例+工厂去掉一大波if和else判断)

    1.订单控制器,提供一个根据商品id和银行渠道id计算商品折后价格的接口: import org.springframework.web.bind.annotation.GetMapping; imp ...

  5. (转)ES6系列——let和const深入理解

    原文:https://juejin.im/post/59e6a86d518825422c0cbb6f https://www.cnblogs.com/slly/p/9234797.html-----l ...

  6. SDN实验---OVS了解(转载)

    转载自:https://opengers.github.io/openstack/openstack-base-use-openvswitch/ 一:Open vSwitch介绍 (一)介绍 在过去, ...

  7. Kafka限流

    1. 客户端认证 如果kafka客户端是认证的,那么可以使用userId和clientId两种认证方式.如果没有认证只能使用clientId限流. bin/kafka-configs. --alter ...

  8. ["Visual Studio快捷键" ,"Vs","IDEA快捷键"]

    描述说明 描述 说明 ↑ 方向键.上 ↓ 方向键.下 ← 方向键.左 → 方向键.右 快捷键大比拼 描述 Visual Studio 快捷键 IDEA快捷键 VisualStudio学名 IDEA学名 ...

  9. ros 源码安装

    版本lunar, 系统版本debian 9.8 参考: http://wiki.ros.org/lunar/Installation/Source 1. Installing bootstrap de ...

  10. python及Django的json序列化

    JSON是一种文本序列化格式(它输出的是unicode文件,大多数时候会被编码为utf-8),人们很容易进行阅读和编写.python自带的dumps方法很有用,能很容易将字典dict类型数据转化为js ...