3.路由切换

3.1.vue-router路由切换

3.1.1.什么是前端路由

路由这个概念最先是后端出现的,发送不同的请求,后端根据请求的不同返回不同的资源,这个时候的url是和后端交互的,需要在后端去配置路由的跳转,这种开发方式有两个特点,一是整个项目中前端代码和后端代码是柔在一起的,通常都是需要模版引擎来支持,代码杂糅在一起后不方便本地开发调试,一旦后端代码有错误,前端无法进行开发,前端被限制在后端的开发方式中,效率很低,项目通常是后端主导,二是每次切换一个页面都需要去重新请求服务器,即使两个页面有很多相似的地方都需要去重新请求,随着单页应用的发扬光大,MVVM概念兴起,前后端分离以及前端工程化的发展,前端所做的事情越来越多,前端圈快速崛起。这里说的单页应用,通俗的说就是一个页面,是无刷新的,url变化,对应的是组件的切换,前端路由是为了实现这种单页应用而出现的。总结起来就是前端路由就是在前端去控制不同url路径,切换不同的组件,可以认为url和组件是一种映射关系

例如:

routes: [
{
path: '/',
components: {
default: Home,
a: HomeSider,
b: HomeMain
}
},
{
path: '/vip',
component: Vip,
children: [
{
path: 'one',
component: One
},
{
path: 'two',
component: Two
},
{
path: 'three',
component: Three
}
]
},
{
path: '/course',
component: Course
}
]

这个配置中, '/vip'这个url路径,匹配的是Vip这个组件,‘/course’这个ulr路径,匹配的是Course这个组件

3.1.2.vue-router使用步骤

1.安装模块

npm install vue-router --save

2.引入模块

import VueRouter from 'vue-router'

3.作为Vue的插件

Vue.use(VueRouter)

4.创建路由实例对象

const router = new VueRouter({
routes: [
{
path: '/',
component: Home
},
{
path: '/questions',
component: Questions
},
{
path: '/vip',
component: Vip
},
{
path: '/course',
component: Course
}
]
})

5.注入Vue选项参数

new Vue({
router
})

6.告诉路由渲染的位置

匹配上的组件会被渲染到router-view这个位置

<router-view></router-view>

3.2.hash和history

3.2.1.什么是单页应用?

百度百科解释,单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

3.2.2.什么是hash和history? hash和history都是浏览器自身的属性,这两种方式都可以对地址进行访问,hash的访问方式即在访问地址末尾加 #name,如:http://edu.nodeing.com#1、 http://edu.nodeing.com#2, history方式通过几个方法back、forword、go等控制页面跳转,他们的区别是hash无刷新,history会去请求后端接口

做单页应用开发,需要引入前端路由,前端路由的核心就是改变了视图后不会向后端发出请求。如果不是单页应用,路由改变是会向后端发送请求的,例如:http://edu.nodeing.com/course/explore、 http://edu.nodeing.com/classroom/explore, 访问这两个地址,路由是不一样的,都是会向后端发送请求的,这不符合前端路由的要求

为了实现路由改变而不向后端发送请求这个目的,可以利用浏览器提供的hash和history这两种模式。

hash: hash虽然在url中,但不会被包含在http请求中,对后端没有影响,hash改变不会重新加载页面(无刷新)

history: 虽然history的几个方法back、forword、go等控制页面跳转会刷新页面,但h5中新增了两个方法pushState和replaceState方法,这两个方法可以实现前端路由的目的,它们应用于浏览器记录栈,在当前已有的back、forword、go基础之上,他们提供了对历史记录修改的功能,当它们执行修改时,虽然当前的url改变了,但是浏览器不会立即向后端发送请求

vue-router即是利用了hash和history这两种模式,来实现路由控制

3.2.3.在vue-router中配置路由模式

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import MyHeader from '@/components/MyHeader'
import MyContent from '@/components/MyContent'
import MyFooter from '@/components/MyFooter' // 让vue-router作为vue的插件使用
Vue.use(VueRouter) // 配置路由信息
const router = new VueRouter({
//默认hash模式
mode: 'history',
routes: [
{
path: '/',
component: Home
},
{
path: '/header',
component: MyHeader
},
{
path: '/content',
component: MyContent
},
{
path: '/footer',
component: MyFooter
}
]
}) export default router

螺钉课堂视频课程地址:http://edu.nodeing.com

vue全家桶(2.1)的更多相关文章

  1. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  2. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  3. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  4. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  5. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  6. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  7. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

  8. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  9. Vue全家桶了解一下(待补充)

    vue全家桶了解一下 一.vue+vue-router+vuex+axios1.vue:使用vue-cli,生成最基本的vue项目2.vue-router:vue项目中的路由管理插件3.vuex:vu ...

  10. 升级vue全家桶过程记录

    背景 如果你使用了element-ui的el-tabs组件,并且想要单独升级element-ui至2.10.0,你会发现,使用了el-tabs组件的页面只要打开就卡死.原因是element-ui~2. ...

随机推荐

  1. 开心一下-实现一个基于Java的中文编程语言2

    https://mp.weixin.qq.com/s/VmCTvh0c7X9DjIgIMycdlw   上一篇所提到的只是使用中文写Java,而不能算作一门新的语言.作为一门中文语言,需要语言提供的关 ...

  2. svg高级应用及动画

    canvas 和 webGL 这两项图形技术结合 css3 可以说能完成绝大部分的动画和需求.但 canvas 和 webGL 毕竟是偏向底层的绘制引擎,某些场景使用起来还是过于繁琐的,不分场合一律使 ...

  3. Java 第十一届 蓝桥杯 省模拟赛 洁净数

    洁净数 小明非常不喜欢数字 2,包括那些数位上包含数字 2 的数.如果一个数的数位不包含数字 2,小明将它称为洁净数. 请问在整数 1 至 n 中,洁净数有多少个? 输入格式 输入的第一行包含一个整数 ...

  4. Java实现ACMGoShopping

    ACMGoShopping Description 最近的YJ运气特别好,这不,他在路边摊买彩票,居然中了大奖.秉着见者有份的原则,他准备请咱们学校ACM训练基地的全体队员逛商场. 赶巧学校旁边有一家 ...

  5. rpm安装Clickhouse

    1. 下载相关安装包 在opt目录下创建clickhouse目录,方便下载文件 Cd /opt/clickhouse  一次执行一下命令 ① wget --content-disposition ht ...

  6. Burpsuite intruder模块 越过token进行爆破,包含靶场搭建

    安装靶场 链接:https://pan.baidu.com/s/19X0oC63oO2cQKK6UL5xgOw 提取码:yq7f 下载完成放入网站根目录 点击初始化安装 出现错误,进行跟踪 发现是数据 ...

  7. Android开发之修改Manifest中meta-data的数据

    代码 private void initFMMap() { ApplicationInfo appInfo = null; try { appInfo = this.getPackageManager ...

  8. Python Opencv-contrib Camshift&kalman卡尔曼滤波&CSRT算法 目标跟踪实现

    本次课题实现目标跟踪一共用到了三个算法,分别是Camshift.Kalman.CSRT,基于Python语言的Tkinter模块实现GUI与接口设计,项目一共包含三个文件: main.py: # co ...

  9. Jmeter(九) - 从入门到精通 - JMeter逻辑控制器 - 上篇(详解教程)

    1.简介 Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”. 意思 ...

  10. Python 3中,import win32com.client 出错

    在 import win32com.client 时,出现了界面: Traceback (most recent call last): File "<pyshell#1>&qu ...