VueJS路由
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路由的更多相关文章
- [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 ...
- Elementui 导航组件和Vuejs路由结合
Elementui 导航组件和Vuejs路由结合, 达到点击导航切换路由,根据路由定位导航 一下是nav.vue代码,导航数据以json格式配置 <template> <el-men ...
- VueJs路由跳转——vue-router的使用
对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router ...
- 第七节：Vuejs路由交互及后台系统路由案例
一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...
- VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...
- VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm ...
- 用vuejs仿网易云音乐（实现听歌以及搜索功能）
前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用 ...
- 三、VueJs 填坑日记之项目文件认识
上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行.在这一篇,我们将认识vuejs项目里的各 ...
- 浅析使用vue-router实现前端路由的两种方式
关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...
随机推荐
- linux下头文件
aio.h 异步I/Oassert.h 验证程序断言complex 复数类complex.h 复数处理cpio.h cpio归档值ctype.h 字符类型dirent.h 目录项,opendir(), ...
- bzoj 1396 识别子串 后缀树+线段树
题目大意 给定一个长度\(\le100000\)的字符串 求每一个位置的最短识别子串 对于位置\(x\),能识别子串\(s[i...j]\)的条件是 1.\(i\le x \le j\) 2.\(s[ ...
- USACO 刷题记录bzoj
bzoj 1606: [Usaco2008 Dec]Hay For Sale 购买干草——背包 #include<cstdio> #include<cstring> #incl ...
- Codevs 1085 数字游戏
1085 数字游戏 2003年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 丁丁最近沉迷于一个数字游戏之中 ...
- 【BZOJ4481&JSOI2015】非诚勿扰（数学期望）
听说JSOI有版权问题就不放图了 如果前面的文章里的图需要删掉请通知我 题意:有一些女的要挑一些男的,挑中的几率均为p.一个男的可以无限次被挑中.若女a选中男b,女c选中男d,a<c,b> ...
- JavaScript文本收缩展开 showdetail
原文发布时间为:2009-11-15 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...
- 处理printf的变参问题
VA_LIST 是在C语言中解决变参问题的一组宏,所在头文件:#include <stdarg.h> (1)首先在函数里定义一具VA_LIST型的变量,这个变量是指向参数的指针: (2)然 ...
- LeetCode OJ-- Recover Binary Search Tree ***@
https://oj.leetcode.com/problems/recover-binary-search-tree/ 一棵二叉搜索树,二叉搜索树的特征是,中根遍历的话,得到的序列是递增的 题目中, ...
- webapi 初识 net
1.新建一个webapi 项目. 2.新建筛选器文件,用户在接口执行前后进行特性操作. public class MyActionWebApiAttribute : ActionFilterAttri ...
- 查询/删除/建立DB2数据表的主键
一.查询表主键. describe indexes for table <instancename>.<tablename> 例: describe indexes for t ...