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

推荐使用淘宝镜像：

  1. cnpm install vue-router

简单实例

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

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

HTML

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  7. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  8. </head>
  9. <body>
  10. <div id="app">
  11.   <h1>Hello App!</h1>
  12.   <p>
  13.     <!-- 使用 router-link 组件来导航. -->
  14.     <!-- 通过传入 `to` 属性指定链接. -->
  15.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  16.     <router-link to="/foo">Go to Foo</router-link>
  17.     <router-link to="/bar">Go to Bar</router-link>
  18.   </p>
  19.   <!-- 路由出口 -->
  20.   <!-- 路由匹配到的组件将渲染在这里 -->
  21.   <router-view></router-view>
  22. </div>
  23.  
  24. <script>
  25. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
  26.  
  27. // 1. 定义（路由）组件。
  28. // 可以从其他文件 import 进来
  29. const Foo = { template: '<div>foo</div>' }
  30. const Bar = { template: '<div>bar</div>' }
  31.  
  32. // 2. 定义路由
  33. // 每个路由应该映射一个组件。 其中"component" 可以是
  34. // 通过 Vue.extend() 创建的组件构造器，
  35. // 或者，只是一个组件配置对象。
  36. // 我们晚点再讨论嵌套路由。
  37. const routes = [
  38.   { path: '/foo', component: Foo },
  39.   { path: '/bar', component: Bar }
  40. ]
  41.  
  42. // 3. 创建 router 实例，然后传 `routes` 配置
  43. // 你还可以传别的配置参数, 不过先这么简单着吧。
  44. const router = new VueRouter({
  45.   routes // （缩写）相当于 routes: routes
  46. })
  47.  
  48. // 4. 创建和挂载根实例。
  49. // 记得要通过 router 配置参数注入路由，
  50. // 从而让整个应用都有路由功能
  51. const app = new Vue({
  52.   router
  53. }).$mount('#app')
  54.  
  55. // 现在，应用已经启动了！
  56. </script>
  57. </body>
  58. </html>

效果图：

NPM 路由实例

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

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

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

  1. # 安装依赖，使用淘宝资源命令 cnpm
  2. cnpm install
  3.  
  4. # 启动应用，地址为 localhost:8080
  5. cnpm run dev

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

  1. 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. mac 安装 homebrew 配置

    前言:刚开始转换系统可能安装各种软件继续中... 1. 打开 Mac 中的命令行工具(终端) 2. 在打开的命令行工具中输入如下语句: ruby -e "$(curl --insecure ...

  2. 2017-2018-2 20179204《网络攻防实践》第十三周学习总结 python实现国密算法

    国密商用算法是指国密SM系列算法,包括基于椭圆曲线的非对称公钥密码SM2算法.密码杂凑SM3算法.分组密码SM4算法,还有只以IP核形式提供的非公开算法流程的对称密码SM1算法等. 第1节 SM2非对 ...

  3. 【HDOJ5534】Partial Tree（树，背包DP）

    题意:有一棵n个点的形态不定的树,每个度为i的节点会使树的权值增加f[i],求树的最大权值 n<=2015,0<=f[i]<=1e4 思路:对不起队友,我再强一点就能赛中出这题了 显 ...

  4. 模仿原生淘宝app点击搜索时的页面滑动效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. duilib入门简明教程 -- 自绘标题栏(5) （转）

    原文转自 http://www.cnblogs.com/Alberl/p/3343667.html         如果大家有做过标题栏的自绘,肯定会感慨各种不容易,并且现有的一些资料虽然完美的实现了 ...

  6. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---52

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  7. 《手把手教你学C语言》学习笔记（2）---学习C语言的目标和方法

    一.学习C语言的目标主要是: 熟练掌握C语言的关键字,语法规则,程序控制等: 掌握基本的数据结构,数组.链表.栈和队列等: 掌握C语言中指针和内存.数组与指针.函数与指针.变量和指针.结构体和指针.硬 ...

  8. StringBuilder 字符串拼接扩容

    String str = a + b + c(a,b,c都是变量,非常量) 实际执行时,"+"操作是通过创建一个StringBuilder来操作的,即: StringBuilder ...

  9. ZSTU 4248 KI的目标（dfs）

    KI的目标 Time Limit: 2 Sec  Memory Limit: 128 MB                                                        ...

  10. Linux shell 环境变量及有效范围

    每当我们使用ssh客户端远程登陆一个服务时,操作系统就会给我们分配一个新的shell,并且这个shell继承了操作系统的永久环境变量.在当前的shell执行一个sh文件,都会临时产生一个子shell, ...