Vue.js 路由

本章节我们将为大家介绍 Vue.js 路由。

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入vue-router库

中文文档地址：vue-router文档。

安装
1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

NPM

推荐使用淘宝镜像：

cnpm install vue-router

简单实例

Vue.js + vue-router 可以很简单的实现单页应用。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

<div id="app">

  <h1>Hello App!</h1>

  <p>

    <!-- 使用 router-link 组件来导航. -->

    <!-- 通过传入 `to` 属性指定链接. -->

    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->

    <router-link to="/foo">Go to Foo</router-link>

    <router-link to="/bar">Go to Bar</router-link>

  </p>

  <!-- 路由出口 -->

  <!-- 路由匹配到的组件将渲染在这里 -->

  <router-view></router-view>

</div>

<script>

// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

const Foo = { template: '<div>foo</div>' }

const Bar = { template: '<div>bar</div>' }

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

  { path: '/foo', component: Foo },

  { path: '/bar', component: Bar }

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

  routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

  router

}).$mount('#app')

// 现在，应用已经启动了！

</script>

</body>

</html>

效果图：

NPM 路由实例

接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：
路由实例

你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example

下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：

# 安装依赖，使用淘宝资源命令 cnpm

cnpm install

# 启动应用，地址为 localhost:8080

cnpm run dev

如果你需要发布到正式环境可以执行以下命令：

cnpm run build

执行成功后，访问 http://localhost:8080 即可看到如下界面：

VueJS路由的更多相关文章

  1. [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function

    1.[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined 注意,只要出现Error i ...

  2. Elementui 导航组件和Vuejs路由结合

    Elementui 导航组件和Vuejs路由结合, 达到点击导航切换路由,根据路由定位导航 一下是nav.vue代码,导航数据以json格式配置 <template> <el-men ...

  3. VueJs路由跳转——vue-router的使用

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router ...

  4. 第七节：Vuejs路由交互及后台系统路由案例

    一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...

  5. VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...

  6. VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...

  7. 用vuejs仿网易云音乐（实现听歌以及搜索功能）

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...

  8. 三、VueJs 填坑日记之项目文件认识

    上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行.在这一篇,我们将认识vuejs项目里的各 ...

  9. 浅析使用vue-router实现前端路由的两种方式

    关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...

随机推荐

  1. Ionic2中使用第三方插件极光推送

    不同于Ionic1中插件的调用,Ionic2提供了Ionic Native.Ionic Native封装了一些常见的插件(如:Camera.Barcode Scanner等),这些插件的使用方式在官方 ...

  2. Gym 100971B 水&愚

    Description standard input/output Announcement   Statements A permutation of n numbers is a sequence ...

  3. 多啦A梦的制作

    小叮当简单颜色单一,操作起来也很容易上手.接下来的一个实例就是用css画出一个多啦A梦,首先将其分为头部,和身体.然后,再根据身体各部分细节进行进一步的具体刻画. 由于最近一直在学习JavaWeb方面 ...

  4. vmware虚拟机无法ping通主机，也无法联网

  5. 【01】Vue 之hello wolrd

    1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view].新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方 ...

  6. 简单的实现web聊天界面，一对一

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. T-SQL还有个内置方法NULLIF()

    declare @cypic varchar if (NULLIF(@cypic, '') IS NOT NULL) begin print 1 end else begin print 2 end ...

  8. Java语法糖（一）

    概述 语法糖(Syntactic Sugar):主要作用是提高编码效率,减少编码出错的机会. 解语法糖发生在Java源码被编译成Class字节码的过程中,还原回简单的基础语法结构. 语法糖之一:泛型( ...

  9. WML标签速查手册 wap标签

    原文发布时间为:2010-08-19 -- 来源于本人的百度文章 [由搬家工具导入] WML标签速查手册(转)比较方便便于速查   结构相关标签 语法及属性 <wml> <wml x ...

  10. luogu P1608 路径统计

    题目描述 “RP餐厅”的员工素质就是不一般,在齐刷刷的算出同一个电话号码之后,就准备让HZH,TZY去送快餐了,他们将自己居住的城市画了一张地图,已知在他们的地图上,有N个地方,而且他们目前处在标注为 ...