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. Winter-Camp欠债记录

    待完成: 球相交体积模板博客 Day3B题计算几何 Splay和Treap学习 [寒假]整理算法&模板

  2. 排查 docker flow proxy 的 503 问题

    这是今天我们在开发环境下 docker swarm 集群上遇到的问题,在这篇博文中记录一下排查过程. 先登录到应用容器内检查一下其中运行的站点是否能正常访问: # docker exec -it 02 ...

  3. keil 生成 bin文件

    D:\Keil_v5\ARM\ARMCC\bin\fromelf.exe --bin -o  $L@L.bin #L 这个就是keil的默认安装路径

  4. AD 16 下绘图的几个技巧

    1.绘制封装如果引脚过多怎么办,使用阵列粘贴功能 首先建立一个焊盘,然后选中,使用 ctrl + c 复制,注意复制确认的时候,鼠标一定要点击到焊盘中间. 选择阵列粘贴 条款就是你要复制多少个,增量就 ...

  5. python内置函数,lambda表达式,文件读写

    Lambda表达式: lambda是个匿名函数,自动加return返回 a={ 6:2,8:0, 1:4,-5:6,99:11,4:22} print(sorted(a.items()))#按key排 ...

  6. qt设计器中使用自定义控件

    当qt设计器中的控件不能满足需要时,这时就要自定义控件.然后再在qt设计器中使用. 在qt设计器中使用自定义控件时,可以用提升. 从控件派生出新的类: 然后在qt设计器中右键需要提升的控件: 填入提升 ...

  7. 注解之@CookieValue

    @RequestHeader以及@CookieValue这两个注解用法类似,属性也相同,所以,写在一起.二者属性和RequestParam的属性一样,用法也几乎一样. 作用 @RequestHeade ...

  8. MySQL Sandbox安装使用

    前言 经常看见新同学对于安装MySQL十分惧怕,这是因为不熟悉的缘故,确实源码编译比较麻烦,缺少各种依赖包也够折腾的.当然还有预编译包,但是对于新同学来说好像都挺麻烦的.当然有yum安装,但是我们需要 ...

  9. pycharm 如何设置方法调用字体颜色

    一.pycharm 如何设置方法调用字体颜色 1.打开pycharm编辑器,file > settings > editor > color scheme > python & ...

  10. Mysql聚集索引的使用

    聚集索引 聚簇索引并不是一种单独的索引类型,而是一种数据存储方式(不是数据结构,而是存储结构),具体细节依赖于其实现方式,聚簇索引实际上是在同一个结构中保存了btree索引和数据行. innodb将通 ...