vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{ path: '/', redirect: '/index' }, //重定向
{ path: '/index', component: resolve => require(['./components/index.vue'], resolve),
children:[
{ path: 'info', component: resolve => require(['./components/info.vue'], resolve) } //嵌套路由
]
},
{ path: '/hello', component: resolve => require(['./components/hello.vue'], resolve) },//require这种就是按需加载(懒加载)
]
})
const app = new Vue({
router,
render: h => h(App)
**************************************************************************************路由跳转传参的query和params的不同********************************************************************************
1.Params
由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。及通过路由配置的name属性访问

通过name获取页面,传递params:在目标页面通过this.$route.params获取参数:

2.Query
页面通过path和query传递参数,this.$route.query获取

query传递的参数url看得到,params则url看不到参数
path--对应query name--对应params
**************************************************************************************c*********************************************************************************************************************
vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同的更多相关文章
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...
- vue中页面卡顿,使用懒加载
为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...
- jquery懒加载jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- 图片懒加载插件echo.js——改造
今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...
- vue-router路由传参之query和params
首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...
- 图片懒加载之lazyload.js插件使用
简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...
- 图片懒加载插件lazyload.js详解
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 瀑布流实例及懒加载(echo.js)
瀑布流布局: 图片等宽,不定高,按最低高度来顺序排列:实现方法:获取每次获取四行中最低高度对应的一行,将下一张加载的图片放在该位置,每次加载前都获取最低高度: ①请求图片的接口 地址此php文件 ...
随机推荐
- JMeter结果树响应数据中文乱码解决办法
encoding编码 打开apache-jmeter-2.11\bin\jmeter.properties文件,搜索“encoding”关键字,找到如下配置: # The encoding to be ...
- LeetCode 11 - 盛最多水的容器 - [双指针暴力]
题目链接:https://leetcode-cn.com/problems/container-with-most-water/description/ 给定 n 个非负整数 $a_1,a_2,\cd ...
- python 过滤掉字符串中的回车符与换行符(\t\n)
我们在文本数据预处理前,要将数据统一整理成需要的格式,其中有回车(\t)或者(\n)符号,会对我们的数据保存有影响,那么就需要将其过滤掉. 比较简单的方法,用replace()将这些符号替换为空,一定 ...
- vue中的provide/inject的学习
在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项.用于父级组件向下传递数据.provide/inject:简单的来说就是在父组件(或者曾祖父组件)中通过pro ...
- 业界微服务楷模Netflix是这样构建微服务技术架构的
1. 如不考虑组织架构,直接切入技术架构(很多架构师的通病),则失败风险巨大. https://mp.weixin.qq.com/s/C8Rdz9wFtrBKfxPRzf0OBQ
- [daily][gnucash] 复式记账
管理, 是成就人生的第一步. 管钱,是第一步中的第一小步. 选了又选,终于选了一个软件,gnucash, 但是, 他有点专业, 用之前需要搞懂一下会计概念. 即: 复式记账 gnucash手册的这一章 ...
- 动态代理Dynamic Proxy
代理模式是常用的Java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类 预处理消息,过滤消息,把消息转发给委托类,以及事后处理消息等. 代理类与委托类之间通常会存在关联关系,一 ...
- todo: 改变字体的动画
todo: 截取指定区域的图片, 改变字体的动画
- DbGridEh中改变行的颜色
DbGridEh中改变行的颜色 代码也挺简单的,只是当时没有想到: if ds2.FieldByName('AutoRead').AsInteger=0 thenbegin DBGridEh1.Ca ...
- STS maven build 访问 jsp页面报错
STS 版本:spring-tool-suite-3.8.1.RELEASE-e4.6-win32-x86_64 maven版本:apache-maven-3.3.9 报错信息如图(图片解决方案来源博 ...