精华内容
下载资源
问答
  • 2022-05-11 20:46:53

    前段时间写的后台管理 有个需求:订单页面生成二维码图片 扫描二维码跳转至app页面

    第一次经历哇!!!
    从扫描二维码跳转过来的时候 url里边携带订单id(参数)
    例如 http://www.hahaha.com/list?orderId=214285#/home

    外部进入的url会放在VUE项目编译以后自动加 “#/” ,其中带的参数在#/之前,那么我们只能用JS的方法来获取

    在methods中定义方法 获取到参数

        /* 获取地址栏url参数 */
        getUrlKey() {
          var url = window.location.href; //获取当前url
          var dz_url = url.split("#")[0]; //获取#/之前的字符串
          var cs = dz_url.split("?")[1]; //获取?之后的参数字符串
          var cs_arr = cs.split("&"); //参数字符串分割为数组
          var cs = {};
    
          for (var i = 0; i < cs_arr.length; i++) {
            //遍历数组,拿到json对象
            cs[cs_arr[i].split("=")[0]] = cs_arr[i].split("=")[1];
          }
    
          this.urlId = cs.orderId;
        },
    

    然后再需要这个id的方法中 调用getUrlKey()就行了

    做一个小小的笔记 收藏

    更多相关内容
  • Vue 获取URL中的参数

    千次阅读 2022-03-18 17:05:34
    获取URL中的参数,并显示在页面上 流程: 1.在index.js中编辑代码如下: import {createRouter,createWebHashHistory} from 'vue-router' import News from '../components/News.vue' import Home from "../...

    实现效果如下:

    获取URL中的参数,并显示在页面上

    流程:

    1.在index.js中编辑代码如下:

    import {createRouter,createWebHashHistory} from 'vue-router'
    import News from '../components/News.vue'
    import Home from "../components/Home.vue"
    
    
    // 1. Define route components.
    // These can be imported from other files
    
    
    // 2. Define some routes
    // Each route should map to a component.
    // We'll talk about nested routes later.
    const routes = [
        {
            path: '/',
            component: Home
        },
        {
            path:"/news/:id*",
            component:News
        },
     
    ]
    
    // 3. Create the router instance and pass the `routes` option
    // You can pass in additional options here, but let's
    // keep it simple for now.
    const router = createRouter({
        // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
        history: createWebHashHistory(),
        routes, // short for `routes: routes`
    })
    
    export default router

    2.新建News.vue

    News.vue:

    <template>
        <div>
            <h1>新闻页</h1>
            <p>参数:{{news_id}}</p>
        </div>
    </template>
    
    <script>
        export default {
            name: "News",
    
            data(){
                return {
                    // 获取参数id
                    news_id : this.$route.params.id
                }
    
            },
        }
    
    
    </script>
    
    <style scoped>
    
    </style>

    展开全文
  • Vue获取url链接中的参数

    千次阅读 2022-03-14 11:01:03
    浏览器地址:http://localhost:8080/#/loginmis?ticket=1234 1. window.location.href 获取完整路径:http://localhost:8080/#/loginmis?ticket=1234 2. this.$ route.path 获取路由路径:"/loginmis" 3. this.$ ...

    浏览器地址:http://localhost:8080/#/loginmis?ticket=1234

    1. window.location.href
    获取完整路径:http://localhost:8080/#/loginmis?ticket=1234
    2. this.$ route.path
    获取路由路径:“/loginmis”
    3. this.$ route.params
    路由路径参数: {}
    4. this.$route.query
    路由查询参数: { ticket: ‘1234’ }

    console.log(this.$route):
    在这里插入图片描述
    Vue中使用:

    <template>
      <div>Loading...</div>
    </template>
    
    <script>
    import { getLoginMis } from "../common/api";
    export default {
      data() {
        return {
          params: {
            ticket: this.$route.query.ticket || "",
          },
        };
      },
      created() {
        console.log(this.$route.query.ticket);
      },
      mounted() {
        this.loginmis();
      },
      methods: {
        loginmis() {
          getLoginMis ({
            params: this.params,
            success: (data) => {
              if(data.returnCode== 0){
                this.$router.push({ path: "/" })
              }else{
                this.$message.error(data.returnMessage);
              }
            },
          });
        },
      },
    };
    </script>
    
    展开全文
  • vue直接获取url中的参数

    千次阅读 2021-04-28 21:52:39
    一、问题描述 前端vue框架项目,后端...lz采用不通过路由直接获取url参数的方法尝试成功 三、解决步骤 1、在vue项目根目录下创建一个urlParse.js文件 export default{ getUrlKey:function(name){ return decod

    一、场景描述

    • 前端vue框架项目,后端springboot框架;
    • lz的需求场景是集成单点登录,通过登录页面路径后追加参数,向后端springboot项目发送请求,后端接收请求后同时获取到追加的参数。

    二、解决方式

    • 网上有说通过路由的方式,lz尝试后失败
    • lz采用不通过路由直接获取url中参数的方法尝试成功

    三、解决步骤

    1、在vue项目根目录下创建一个urlParse.js文件

    export default{
      getUrlKey:function(name){
        return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
      }
    }
    

    在这里插入图片描述

    2、在vue项目根目录下main.js中注册全局方法

    import urlParse  from './urlParse'    //获取url参数
     
    Vue.prototype.$urlParse=urlParse   //注册全局方法
    

    在这里插入图片描述
    3、vue的登录页面中该方法

    //AuthToken 表示vue项目登录页面路径后追加的参数
    let AuthToken=this.$urlParse.getUrlKey("AuthToken")
    

    在这里插入图片描述

    展开全文
  • // 获取地址参数 getData() { // let url=window.location.href; // console.log(url); let url = 'https://wx.lfsituo.com/Supplier/orderInfo?order_id=3';//传参数 let name = "order_id"; ...
  • 参数1.1、路由取参方式this.$route.query.id前端跳转方式:一、onclick方式title="测试数据"@click="test(row.id)"target="_blank">{{row.title}}test(id){this.$router.push({path:"/m4detail",query:{id:id}})...
  • Vue 学习入门指南2. Vue 入门环境搭建3. Visual Studio Code 使用指南axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,网络请求框架。支持的浏览器:一、安装axios1.打开vs code ,导入我们之前创建...
  • (1)、vue的面试题2018 vue前端面试题 - 实现丰盛 - 博客园​www.cnblogs.comvuex实现购物车效果https://blog.csdn.net/qq_35430000/article/details/79916110​blog.csdn.netvue 动态路由传值vue动态路由配置,vue...
  • 浏览器缓存是基于url进行缓存的,如果页面允许缓存,则在一定时间内(缓存时效时间前)再次访问相同的URL浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。 1.2 请求按模块合并 模块的请求: ...
  • vue 两种方法获取url里的参数

    千次阅读 2019-02-13 10:03:20
    const query = Qs.parse(location.search.substring(1)) let passport = query.passport;
  • 由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。背景介绍由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求...
  • vue 重定向到其他服务,怎么获取url参数
  • 思路分析: 1.location.search//得到?search=%E9%9E%8B 2.location.search.substring(1)//&amp;amp;...search=%E9%9E%8B&...(substring是截取字符串,参数1代表从什么时候截取,参数二代表结束位...
  • vue获取参数的几种方式

    千次阅读 2022-01-13 21:18:54
    我们熟知的JS框架如react,vue,angular,ember都属于SPA。 1.1.2 什么是MPA(多页面应用) 平常写的普通页面就是MPA,通过a标签实现页面切换,每次切换页面都要重新加载公共资源部分。 1.1.3 SPA和MPA的区别 区别 ...
  • I am trying to set query params with Vue-router when changing input fields, I don't want to navigate to some other page but just want to modify url query params on the same page, I am doing like this:...
  • 2020Q1需求中有一段关于浏览器URL地址隐藏的需求如下: 需将系统的URL地址需要进行加密处理。 a)IP地址后面的信息需要控制为不能按照意思猜到或者改变页面内容,不能把一些参数的名称和值都在URL地址栏中暴露出来,...
  • vue如何获取当前页面的url

    千次阅读 2022-01-14 22:52:23
    window.location 对象不仅可以获得当前页面的地址 (URL),还能够将浏览器重定向到新的页面。 下面,以http://www.baidu.com:8080/test?id=123为例来进行解释: 获取方式: 1)window.location 1. window.location....
  • 在用iframe的时候都会做分页操作 iframe内部的url跳转将不能直接通过iframe的src属性来获得,下面与大家分享下iframe的当前url获取方法
  • 在完成毕业设计(基于Vue的信息资讯展示与...第1次,点击“潮科技”时显示的内容:第2次,点击“奇趣事”时显示的内容:造成上述情况的原因:vue项目中路由跳转默认采用hash的方式,而hash的变化不会导致浏览器发送请...
  • 在使用Vue进行前端项目开发过程中,会遇到出于安全考虑,浏览器地址栏禁止显示方法参数的需求。以下方法可实现以上需求。
  • 出现的问题: 不想要在地址栏中显示中文。 解决方法如下: toTask(value) { ... //解决浏览器地址栏中明文展示的中文信息 this.contentmouseleave(); //关闭下拉 this.$router.push({ path: `/detail
  • vue中跳转传值,参数不在URL中显示并获取,超详细,适合小白
  • 下边是url加密和解密方法/*** url参数加密* 传入json格式的串* @param {*Object} query*/const EncryUrl = query => {if (!utils.isObject(query)) {return "";}try {query = JSON.stringify(query);query = ...
  • vue监听浏览器返回

    千次阅读 2019-10-15 15:33:41
    大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安全原因javascript不允许修改history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件...
  • 不管是Android还是iOS都有各自的...问题:后台url请求需要携带cookie,需要用户的useId,但是我做的这个vue工程只是app里的一个小模块······ 需求:在用webview加载该模块时,需要同时传入cookie和useId,v...
  • vue-router跳转及参数获取整理

    千次阅读 2020-07-03 14:47:35
    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心...那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果: const User = { template: '<div>User&.
  • 使用vue-resource库发送请求获取数据大家一定知道,在jquery中,我们使用$.ajax()方法,来发送请求获取数据,在vue中,我们使用vue-resource或者axios来向接口发送请求,获取数据,官方推荐使用axios,其实用法差不多...
  • H5客户端获取Url参数的方法

    千次阅读 2019-07-25 09:50:37
    一,window.location.href: 获取完整的url链接 二,this.$ route.path:前端路由中配置的path 三,this.$ route.fullPath:当前页面除去协议,域名后的完整链接 四,以对象的形式获取当前Url链接?后面拼接的参数...
  • vue项目中获取地址栏参数并且截取

    千次阅读 2021-04-23 17:46:16
    然后我就在想,肯定要获取到当前页面的url地址,这样后边才能截取url地址中的参数,代码如下 var url = window.location.href; //获取地址栏路径 var temp1 = url.split('?');//对url地址进行分割 var pram = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,298
精华内容 9,719
关键字:

vue获取浏览器url参数