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的异同的更多相关文章

  1. vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...

  2. vue中页面卡顿,使用懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题. 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载. 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的imp ...

  3. jquery懒加载jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  4. 爬虫之图片懒加载技术及js加密

    图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...

  5. 图片懒加载插件echo.js——改造

    今天做一个列表项需要用到懒加载,搜到网友推荐的echo.js,试用了一下,还不错.除了懒加载,还提供了throttle——节流,即用户快速滑动列表时,很快滑过的项的图片不会加载,只会加载最后停下来的位 ...

  6. vue-router路由传参之query和params

    首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.pu ...

  7. 图片懒加载之lazyload.js插件使用

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 使用 lazyload依赖与jquery.所以先引入jquery和lazyl ...

  8. 图片懒加载插件lazyload.js详解

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 瀑布流实例及懒加载(echo.js)

    瀑布流布局: 图片等宽,不定高,按最低高度来顺序排列:实现方法:获取每次获取四行中最低高度对应的一行,将下一张加载的图片放在该位置,每次加载前都获取最低高度: ①请求图片的接口    地址此php文件 ...

随机推荐

  1. 文末有福利 | IT从业者应关注哪些技术热点?

    7月14-15日,MPD工作坊北京站即将开幕,目前大会日程已经出炉,来自各大企业的技术专家,按照软件研发中心的岗位职能划分,从产品运营.团队管理.架构技术.自动化运维等领域进行干货分享,点击此[链接] ...

  2. DSO论文解读

    dso 1.1. Motivation 本文提出的单目视觉测距法的直接和稀疏公式是出于以下考虑因素; (1)直接: 关键点的主要优点之一是它们能够为使用现成的商品相机拍摄的图像中存在的光度和几何失真提 ...

  3. [No0000104]JavaScript-基础课程4

    要说 JavaScript 和其他较为常用的语言最大的不同是什么,那无疑就是 JavaScript 是函数式的语言,函数式语言的特点如下: 函数为第一等的元素,即人们常说的一等公民.就是说,在函数式编 ...

  4. angular ajax请求 结果显示显示两次的问题

    angular 项目中,由于用到ajax 请求,结果显示如下情况 同样的接口,显示两次,其中第一次请求情况为 request method 显示为opttions 第二次的情况是 为啥会出现如此的情况 ...

  5. Flink - StreamJob

      先看最简单的例子, final StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironmen ...

  6. LeetCode 893 Groups of Special-Equivalent Strings 解题报告

    题目要求 You are given an array A of strings. Two strings S and T are special-equivalent if after any nu ...

  7. Java之旅_高级教_集合框架

    摘自:http://www.runoob.com/java/java-collections.html Java 集合框架 早在Java2之前,java 就提供了特设类.比如:Dictionary,V ...

  8. 20165336 学习基础与C语言基础调查

    20165336 技能学习心得与c语言学习 一.心得体会 做教练 从老师的健身教练健身学员的学习关系中我懂得了学生应该有自主的学习意识,要有计划地去训练.去流汗,并且要以100分的要求严于律己,老师是 ...

  9. Orchard Core 中数据库使用postgresql-10

    在配置好Startup.cs后,运行程序: 首先需要设置一些基本信息.这里我试着配置如下,数据库使用postgresql,连接字符串像这样: Host=192.168.0.111;UserName=u ...

  10. 洛谷P1955 程序自动分析 [NOI2015] 并查集

    正解:并查集+离散化 解题报告: 传送门! 其实题目还挺水的,,,但我太傻逼了直接想挂了,,,所以感觉还是有个小坑点所以还是写个题解记录下我的傻逼QAQ 首先这题一看,就长得很像NOIp关押罪犯?然后 ...