从零开始Vue项目实战(四)-路由
一、理解路由
传统的页面应用,是用一些超链接来实现页面切换和跳转的。而vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
路由中有三个基本的概念 route, routes, router。
1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。
2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]
3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。
4,客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.
二、vue-router中的路由
在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。
1, 页面实现(html模版中)
在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分,<router-view> 定义显示部分,就是点击后,区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to,定义点击之后,要到哪里去, 如:<router-link to="/home">Home</router-link>
2, js 中配置路由
首先要定义route, 一条路由的实现。它是一个对象,由两个部分组成: path和component. path 指路径,component 指的是组件。如:{path:’/home’, component: home}
我们这里有两条路由,组成一个routes:
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
最后创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数。
const router = new VueRouter({
routes // routes: routes 的简写
})
配置完成后,把router 实例注入到 vue 根实例中,就可以使用路由了
const app = new Vue({
router
}).$mount('#app')
执行过程:当用户点击 router-link 标签时,会去寻找它的 to 属性, 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home} path 一一对应,从而找到了匹配的组件, 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的。
三、设置路由
从零开始Vue项目实战(四)-路由的更多相关文章
- 从零开始Vue项目实战(一)-准备篇
从前参与过一个react项目的代码编写,大神搭建的框架,我主要负责业务逻辑代码编写,现在回想起来似乎又什么都不会,现在为了巩固前端知识,决定用Vue来做这个项目的移动端网站,我本人Vue是从零开始的, ...
- 从零开始Vue项目实战(三)-项目结构
目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构建后 ...
- 从零开始Vue项目实战(二)-搭建环境
1.下载node.js并安装 下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v ...
- webpack+vue项目实战(四,前端与后端的数据交互和前端展示数据)
地址:https://segmentfault.com/a/1190000010063757 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发.简单点说呢,就是与后端的数据交互和怎么 ...
- vue项目实战
本篇文章主要介绍了vue的环境配置,vue项目的目录结构以及在开发vue项目中问题的一些解决方案. 环境配置及目录结构 1.安装node.js(http://www.runoob.com/nodejs ...
- vue项目实战, webpack 配置流程记录
vue项目实战记录,地址在这 购物车单界面 npm install npm run dev 跑起来可以看到界面效果 这里简单记录一下webpack的编译流程 入口 package.json " ...
- miniFTP项目实战四
项目简介: 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务 ...
- Vue 项目实战系列 (一)
最近一直在学习Vue,基本的文档看完后就需要进行具体的项目进行练手了,本系列文章主要是将我学习过程记录下来,和大家一起学习交流. 我在git上找到了一个淘票票的Vue项目,项目地址: https:// ...
- vue项目实战总结
马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...
随机推荐
- css3 渐变色
Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标. 渐变可以创建类似于彩虹的效果,低版本的浏览器使用图片来实现,CSS3将会轻松实现网页渐变效果 粘贴代码 <di ...
- CSS3实现鼠标悬停扩展效果
我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示. 总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪元素 ...
- BNU 4356 ——A Simple But Difficult Problem——————【快速幂、模运算】
A Simple But Difficult Problem Time Limit: 5000ms Memory Limit: 65536KB 64-bit integer IO format: %l ...
- NPOI之C#下载Excel
Java中这个类库叫POI,C#中叫NPOI,很多从Java一直到.Net平台的类库为了区别大部分都是在前面加个N,比如Hibernate和NHibernate. npoi下载地址 一.使用NPOI下 ...
- LintCode刷题小记491
题目: 判断一个正整数是不是回文数. 回文数的定义是,将这个数反转之后,得到的数仍然是同一个数. 样例: 11, 121, 1, 12321 这些是回文数. 23, 32, 1232 这些不是回文数. ...
- [SQL SERVER系列]工作经常使用的SQL整理,实战篇(一)[原创]
工作经常使用的SQL整理,实战篇,地址一览: 工作经常使用的SQL整理,实战篇(一) 工作经常使用的SQL整理,实战篇(二) 工作经常使用的SQL整理,实战篇(三) 目录概览: 1.数据库 2.表 3 ...
- MySQL的知识回顾
经过一段时间的NodeJs开发经历,选用的数据库是MySQL,一开始以为自己对数据库的基础知识掌握还ok,因为毕竟自己以前用过Apache+PHP+MySQL做数据库课程设计,但是在开发过程中才知道在 ...
- flex布局的一些注意点
现在来总结下自己在项目中用flex布局的一些注意点 1.ui图中的布局方式与justify-content的布局方法不一样 这是就要利用flex-grow的空dom来分开子容器来达到页面布局的效果 2 ...
- canvas-菜鸟版画布时钟
这是以前自己练习写的一个画布时钟 <!DOCTYPE html><html lang="en"> <head> <meta charset ...
- Popularize what is heart of mobile phone?
From: http://tech.sina.com.cn/mobile/n/2014-09-29/08399657494.shtml 只谈核数没意义 带你重新认识手机SoC 2014年09月29日 ...