一、路由基础介绍

  1、什么是前端路由?

    路由是根据不同的url地址展示不同的内容或页面

    前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现的(只更新页面的某一部分,而不是整体重新加载了)

  2、什么时候使用前端路由?

    在单页面应用,大部分页面结构不变,只改变部分内容的使用

  3、优缺点

  优点:

    用户体验好,不需要每次都从服务器全部获取,快速展现给用户

  缺点:

    不利于SEO

    使用浏览器的前进、后退键的时候会重新发送请求,没有合理地利用缓存

    单页面无法记住之前滚动的位置,无法再前进、后退的时候记住滚动的位置

二、vue路由

  vue-router用了构建SPA

  <router-link></router-link>或者this.$router.push({path:''})   跳转标签

  <router-view></router-view>

三、动态路由匹配

  什么是动态路由

四、嵌套路由

  什么是嵌套路由

    

五、编程式路由

  通过js来实现页面的跳转

  $router.push("name")

  $router.push({path:"name"})

  $router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})

  $router.go(1)

六、命名路由和命名视图

  给路由定义不同的名字,根据名字进行匹配

  给不同的router-view定义名字,通过名字进行对应组件的渲染

Vue的路由设置的更多相关文章

  1. vue的路由设置小结

    vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...

  2. 【Vue的路由,SPA概念】

    前言 本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念 总的而言,我们知 ...

  3. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  4. react一看就会的简单路由设置

    不管是vue还是react  这种单页面的框架一定都少不了路由 下面给大家讲讲在实际项目中react的路由设置 第一步: 在src目录下新建一个目录route  在该目录下新建一个index.js用于 ...

  5. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  6. Vue.js路由详解

    有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...

  7. vue嵌套路由 && 404重定向

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...

  8. Vue 前端路由 vue-router

    1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...

  9. vue嵌套路由与404重定向实现方法分析

    第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...

随机推荐

  1. Unix和Windows文件格式转化

    可能的原因有: 1)执行权限的问题 解决方法: chmod +x ***.py 2)python版本的问题 解决方法:在执行时或者在py文件中选择好对应的Python的版本 3)python文件格式的 ...

  2. Spring IOC(二)beanName 别名管理

    Spring IOC(二)beanName 别名管理 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) 一.AliasReg ...

  3. 原创:Spring整合junit测试框架(简易教程 基于myeclipse,不需要麻烦的导包)

    我用的是myeclipse 10,之前一直想要用junit来测试含有spring注解或动态注入的类方法,可是由于在网上找的相关的jar文件进行测试,老是报这样那样的错误,今天无意中发现myeclips ...

  4. sqli-labs:7,导入导出;8-10 延时注入

    1,Load_file()导出文件 使用条件: A.必须有权限读取并且文件必须完全可读(and (select count(*) from mysql.user)>0/* 如果结果返回正常,说明 ...

  5. DNA计算机及DNA存储

    傅里叶变换到量子水平,可编程元素到原子分子核能,都可以极大的改变有机体(高级有机体都是有寿命的,例如人类),如果可以出现机械体,核能提供能量:并结合类似高级生物大脑的有机体大脑,不断学习进化,甚至优化 ...

  6. 【Linux】Tree命令安装和使用

    Tree命令简介 tree是一种递归目录列表命令,产生一个深度缩进列表文件,这是彩色的ALA dircolors如果ls_colors设置环境变量和输出是TTY.树已经被移植和报道以下操作系统下工作: ...

  7. CSS-背景-渐变-文本格式化

    1.背景 1.背景色 属性:background-color 取值:合法的颜色值 注意:背景颜色和背景图片默认都从边框位置处开始填充 2.背景图片 属性:background-image 取值:url ...

  8. 使用tensorflow下的GPU加速神经网络训练过程

    下载CUDA8.0,安装 下载cuDNN v5.1安装.放置环境变量等. 其他版本就不装了.不用找其他版本的关系. 使用tensorflow-gpu1.0版本. 使用keras2.0版本. 有提示的. ...

  9. Sencha extjs 的安装

    delphi 的母公司Idera 突然就把sencha extjs 收购了,这确实是一个很好的消息,意味着delphi 开始在web方面开始发力, 目前delphi 集成extjs 的呼声越来越强烈, ...

  10. 28、shareSDK分享以及 QQ应用平台申请遇到的问题

    第一点:菜单列表没出来 未添加白名单 第二点: QQ平台申请,和安卓共用一个APP名字,出现的 问题 第三点