精华内容
下载资源
问答
  • Vue router 如何传参 params、query 是什么? params:/router1/:id,这里的 id 叫做 params。例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query。例如/router1?id=456 query 方式传参...
  • Vue Router 关于 添加、删除query中个别的参数 在写项目过程中涉及到一个需求,大概形容一下就是点击表格中对应的某个值进行跳转到表头的其他tab,目前是再返回的时候数据会自动刷新,所以需要再返回的时候,准确...

    Vue Router 关于 添加、删除query中个别的参数

    在写项目过程中涉及到一个需求,大概形容一下就是点击表格中对应的某个值进行跳转到表头的其他tab,目前是再返回的时候数据会自动刷新,所以需要再返回的时候,准确定位到刚刚点的那个title对应的页面页数以及行数,在把它勾选上,置灰背景,因为要跳转的内容共用一套表格,来回切会更新记录,为了保存住跳转那一刻的页码以及title的id 所以要存到url上 ,需求不难 过程不详述 由于涉及到url网址上的参数 添加或删除,只记录query的问题

    首先是 添加一个参数

    假如添加一个 page为1 ,id为123456 的参数

    this.$router.replace({ query: { ...this.$route.query, page: '1',id:123456 } })
    
    

    删除 一个参数

    这一块稍微会有点复杂 涉及深浅拷贝 比如正确回退到对应的页面后,为了不影响下一次的刷新 能再次获得第一页的数据 所以需要删除page参数

    let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 先拷贝一个一模一样的对象
    delete newQuery.page //再删除page
    this.$router.replace({ query: newQuery }) //再把新的替换了
    

    这样就完成了跳转后的删除
    对了 删除还有一个办法 如果有引入 lodash, 可以写成: let newQuery = _.omit(this.$route.query, ‘page’) 来删除参数

    展开全文
  • 本篇文章主要介绍了vue params、query传参使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • $router.push({name:'apps',query:{id:ele.id}})"/>

    作者:老吴 (转载请注明出处)

    1、页面跳转方式
    • 在vue项目开发中使用频率最多的有两种跳转方式queryparams跳转,他们都属于$route里的参数
    • 他们都使用this.$router.push({})进行跳转
    • query用于get信息的传输,比如详细页id,姓名,等等
    • params用于post信息的传输,比如用户密码,等其他保密信息
    2、使用query跳转路由

    在vue列表中使路由跳转的方式可以使用$router.push({name:'',query:''}),方式来跳转

    • 1、HTML
    <van-image :src="ele.pic" @click="$router.push({name:'apps',query:{id:ele.id}})"/>
    
    • 2、js

    通过watch进行实时监听获取详细页的数据

        watch: {
            '$route.query.id':{
                handler(newVal){
                     this.$http.get('https://api.it120.cc/small4/cms/news/detail?id='+newVal).then(res=>{
                console.log(res.data.data);
                this.add=res.data.data;
            })
                },
                  immediate: true
            }
        },
    
    3、总结

    因为在vue中大多数都是单页面所以路由跳转使用的频率较高所以必须要学会,如有不足之处欢迎下方评论

    展开全文
  • Vue 去除query里的指定参数 一 新建editRouteQuery.js文件 //共接收2个参数 route对象,参数对象 参数值需为null export const editRouteQuery = (route, query = null) => { const _old = route.query let _...

    Vue 去除query里的指定参数
    一 新建editRouteQuery.js文件

    //共接收2个参数 route对象,参数对象 参数值需为null

    export const editRouteQuery = (route, query = null) => {
      const _old = route.query
      let _new = query
    
      if (query) {
        _new = Object.assign({}, _old, query)
      }
    
      for (let key in _new) {
        if (!_new[key]) {
          delete _new[key]
        }
      }
    
      return {
        ...route,
        query: _new,
      }
    }
    

    二 用法

    this.$router.replace(editRouteQuery(this.$route, { name: null }))
    

    2 无刷新去除url参数

    /**
     * 删除URL中指定search参数,会将参数值一起删除
     * @param {string} url 地址字符串
     * @param {array} aParam 要删除的参数key数组,如['name','age']
     * @return {string} 返回新URL字符串
     */
    export const editUrl = (url,aParam) =>{
        aParam.forEach(item => {
            const fromindex = url.indexOf(`${item}=`) //必须加=号,避免参数值中包含item字符串
            if (fromindex !== -1) {
                // 通过url特殊符号,计算出=号后面的的字符数,用于生成replace正则
                const startIndex = url.indexOf('=', fromindex)
                const endIndex = url.indexOf('&', fromindex)
                const hashIndex = url.indexOf('#', fromindex)
    
                let reg;
                if (endIndex !== -1) { // 后面还有search参数的情况
                    const num = endIndex - startIndex
                    reg = new RegExp(`${item}=.{${num}}`)
                    url = url.replace(reg, '')
                } else if (hashIndex !== -1) { // 有hash参数的情况
                    const num = hashIndex - startIndex - 1
                    reg = new RegExp(`&?${item}=.{${num}}`)
                    url = url.replace(reg, '')
                } else { // search参数在最后或只有一个参数的情况
                    reg = new RegExp(`&?${item}=.+`)
                    url = url.replace(reg, '')
                }
            }
        });
        const noSearchParam = url.indexOf('=')
        if( noSearchParam === -1 ){
            url = url.replace(/\?/, '') // 如果已经没有参数,删除?号
        }
        return url
    }
    
    //用法
    
    window.history.replaceState('', '', editUrl(this.$route.fullPath,['mode','pay']));
    
    **url获取指定参数**
    
    ```typescript
    const url = 'https://www.baidu.com/edit?id=123&name=1'
    const code = res.resultStr.split('?')[1].match(/(^|&)qrcodeNo=([^&]*)/)[2]
    
    
    
    展开全文
  • vue 如何清空this.$route.query的值

    千次阅读 2021-02-01 11:56:43
    定义一个 localStorage 来判断当前是否是query携带参数进来页面的 //如果有当前localStorage isTest 则 清空query if(localStorage.getItem('isTest')){ this.$router.push({ query: {} }) } // if(this.$...

    mounted
    定义一个 localStorage 来判断当前是否是query携带参数进来页面的

    
    //如果有当前localStorage isTest 则 清空query
     if(localStorage.getItem('isTest')){
         this.$router.push({ query: {} })
     }
    
    //
     if(this.$route && this.$route.query && this.$route.query.id){
     	//定义一个 localStorage isTest
         localStorage.setItem('isTest', true)
         // 这里处理携带进来的参数
     }
    

    destroyed

    destroyed() {
       localStorage.removeItem('isTest')
    }
    
    展开全文
  • 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望...
  • 关于vue接口query传递数组

    千次阅读 2020-03-18 17:13:29
    关于vue接口query传递数组 重中之重
  • vue 中的动态传参和query传参

    万次阅读 2018-07-17 23:43:27
    Vue router 如何传参 params、query 是什么? params:/router1/:id,这里的 id 叫做 params。例如/router1/123, /router1/789 query:/router1?id=123,这里的 id 叫做 query。例如/router1?id=456 query 方式...
  • 本篇文章主要介绍了详解vue嵌套路由-query传递参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue查询 轻松遍历的组件树。 重要信息:Vue的React/事件系统非常强大且灵活,应涵盖99.99%的用例。 实际上,必须遍历组件树几乎总是意味着您在... import VueQuery from 'vuequery' // You can also alias the impo
  • location.search转为Vue的$route.query 在重构的项目中,其他项目跳转到当前项目并不是通过location.hash来添加对应的参数的,而是通过加载到location.search里面来传递参数的,那我们就不能通过 Vue Router的 this...
  •  遇到个需求,要求在同一个path下,通过不同的query实现跳转不同的页面,大概就是下面这个样子: 这样当全路径变化的时候,就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注
  • 最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题,问题描述如下: 希望跳转的时候url是这样的:...
  • vue路由之query传参

    千次阅读 2018-08-22 21:50:18
    配置完成后: ...{name:'detail',query:{id:item.pid}}" &lt;ul&gt; &lt;li v-for="item in arr"&gt;&lt;router-link :to="{name:'detail',query:{i...
  • vue3关于路由query传参

    2021-08-13 15:55:21
    import { useRouter } from "vue-router"; const router = useRouter(); router.push({ path: "/Detail", query: { id:"123" } }); 接受 import { useRoute } from "vue-router"; const route = useRoute(); ...
  • Vue查询生成器Vue的查询生成器。 演示文档中包含大量示例和用例。 功能主要功能:对Vue查询构建器重新排序Vue的查询构建器。 演示文档中包含大量示例和...安装yarn添加query-builder-vue npm install query-builder-vue
  • vue动态修改路由的query参数

    万次阅读 2019-05-08 18:47:43
    vue动态修改路由的query参数 1、安装npm 依赖 npm i webpack-merge 2、写入代码 import merge from 'webpack-merge'; 修改原有参数 this.$router.push({ query:merge(this.$route.query,{'maxPrice':'630'}) }) ...
  • Vue通过query获取路由参数

    万次阅读 2019-05-09 09:00:12
    上一期讲了如果创建一个路由对象以及使用,现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为name=zhangsan&job=teacher 使用 this.$route.query 来获取路由参数 现在就是利用query...
  • vue获取url中的参数值,this.$route.query

    千次阅读 2020-05-21 14:10:37
    如果有的参数可传可不传,可以使用?传参 ... 获取的时候: ...一、在vue组件单页面中获取页面参数 watch: { "$route.query": { handler() { if (this.$route.query) { // this.departmentDid 是在
  • 主要介绍了vue-router中params和query的区别,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue使用query传值取值

    千次阅读 2020-06-09 17:15:54
    this.$router.push({ path: '/moreCard', query: {typeId: id} }) 取值:this.$route.query.typeId
  • $route.query 一个 key/value 对象,表示 URL 查询参数。 $route.path 字符串,对应当前路由的路径 $route.fullPath 完成解析后的 URL,包含查询参数和 hash 的完整路径。 分析 当浏览器刷新时,触发 导航守卫 ...
  • query: Object.assign({}, this.$route.query, { _: +new Date() }) }) 字符串 this.$router.push({ path: this.$route.path, query: Object.assign({}, this.$route.query, { _: new Date() }) }) ...
  • @ oarepo / vue查询同步器 ...yarn add @oarepo/vue-query-synchronizer@^3.0.0 从来源 yarn build cd dist; yarn link cd your_project yarn link @oarepo/vue-query-synchronizer 用法 插件安装 将
  • vue-query-builder获取sql

    千次阅读 2020-07-28 00:26:47
    Vue版的query builder。可用于前端构造查询条件,类似jquery build的简易版。 源地址:https://github.com/dabernathy89/vue-query-builder 由于作者比较纠结是否应该在前端进行sql转化而没有加这个功能????,所把它...
  • vue设置全局query参数

    2019-10-08 17:02:41
    router.beforeEach((to, from, next) => { // 设置全局店铺ID ... const shopid = from.query.shopid // 如果没有shopid 先跳转到总店 shopid为1 if (!shopid && !to.query.shopid) { router.r...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,781
精华内容 17,912
关键字:

queryvue

vue 订阅