时隔一年,发现自己回来看自己写的文档都看得云里雾里,这次我在重新改善下这篇文章,希望这篇文章能给大家一些帮助
-2019/12/26

1.query传参:

1.query传参
路由:

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } 
      ]
    })

导航:

	// 注意:这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login?id=10&name=zs">登录</router-link>
    <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link><router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link>
    
    
等同于:
	this.$router.push('/login?id=10&name=zs')
	this.$router.push({path:'/register',query:{id:5,name:'lili'}})this.$router.push({name:'register',query:{id:5,name:'lili'}})

注意:jquery可以通过name或path来引入路由

2.params传参

2.params传参
路由:

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },// 这里不传入对应的参数(:/id/:name) 刷新页面 参数会消失,页面中就丢失了数据
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })

导航:

// 注意:这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象
    <router-link to="/login/12/ls">登录</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link>
    
等同于:
	this.$router.push('/login/12/ls')
	this.$router.push({name:'register',params:{id:10,name:'lili'}})

注意:params只能通过name来引入路由,path会undefined

jquery传参和params传参的区别

1.用法上:

  1. 上文已经提到query可以用name或path来引入
  2. params必需要用name来引入,接收参数都是类似的,分别是:
    this.$route.query.namethis.$route.params.name

2.地址栏表现形式上:
query:
在这里插入图片描述

params:
在这里插入图片描述
注意:这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失

Logo

前往低代码交流专区

更多推荐