vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例
vuejs取得URL中参数的值
地址:http://localhost:3333/#/index?id=128
console.log(this.$route.query.id)
结果:128
============
使用路由获取页面参数
在路由中设置path:
{
path: '/detail/:id/',
name: 'detail',
component: detail,
meta: {
title: '详情'
}
}
获取参数
let id = this.$route.params.id
备注:
1、参数名需要保持一致
2、如果路由中没有传参(http://192.168.1.12:8080/#/detail),会报错,页面无法显示,正常页面为 http://192.168.1.12:8080/#/detail/234
如果有的参数可传可不传,可以使用?传参
例如:http://192.168.1.12:8080/#/detail/?id=123
获取的时候:
let id = this.$route.query.id
这样即使取不到参数,页面也不会报错
使用js获取页面参数
如果是在普通js文件中,想获取url后面的参数,可以新建一个工具类,utils.js:
/* eslint-disable */
export default{
getUrlKey: function (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}
}
在其他需要获取参数的js中引入
import Vue from 'vue'
import utils from '../../assets/scripts/utils'
// Vue.prototype.$utils = utils // main.js中全局引入
let id = utils.getUrlKey('id')
console.log()
url为http://192.168.1.12:8080/#/detail/?id=123时,可以得到id为123
vue不通过路由直接获取url中参数的方法示例的更多相关文章
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- [工具类]获取url中参数列表
写在前面 在项目中经常用到解析url中参数的逻辑,今天先下载就自己封装了一个方法,方便以后使用的时候,信手拈来.当然这里给出的方法是针对常见的url参数类型的,对于重写url,或者路由格式的不考虑. ...
- js获取url中参数名也参数值
要撮利用js获取url中参数名也参数值这个不多见了,但我今天需要这样操作,下面我来给大家介绍一下具体的实例方法. 在已知参数名的情况下,获取参数值,使用正则表达式能很容易做到. js的实现方法如下 ...
- 获取url查询参数的方法
/** * 获取url查询参数的方法 * @param name * @returns {null} * @constructor */ function GetQueryString(name) { ...
- 获取地址栏URL中参数, getQuerySting()方法
今天同事用的以前的获取url地址参数获取不到.以前的方法失效了.后面发现是正则表达式bug: 第一种获取方法(针对普通情况的一般够用): function getQueryString(name) { ...
- js获取url中参数
/** * 获取地址栏参数值 * @param name 参数名 * @returns */ $(function () { var url = location.search; //获取url中 ...
- 通过正则表达式获取url中参数
url: http://xxxx.com?name=魅力&id=123 js中: var name = getUrlParam("name"); /*通过正则获取url中的 ...
- js的url中传递中文参数乱码,如何获取url中参数问题
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码: <script type=”text/javascript ...
- JS中的的Url传递中文参数乱码,如何获取Url中参数问题
一:Js的Url中传递中文参数乱码问题,重点:encodeURI编码,decodeURI解码: 1.传参页面Javascript代码:<script type=”text/javascript” ...
随机推荐
- unity 改变鼠标样式的两种方法
1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...
- FFMPEG 入门
1. 下载网站:https://ffmpeg.zeranoe.com/builds/ 先后下载 Win32 Shared 和 Win32 Dev 两个版本,分别解压缩. 2. 用Visual Stud ...
- Java接口的幂等性设计
转载:https://www.cnblogs.com/jack87224088/p/8688948.html 在微服务架构下,我们在完成一个订单流程时经常遇到下面的场景: 一个订单创建接口,第一次调用 ...
- LeetCode - 804. Unique Morse Code Words
International Morse Code defines a standard encoding where each letter is mapped to a series of dots ...
- C#俄罗斯方块小游戏程序设计与简单实现
C#俄罗斯方块小游戏程序设计与简单实现 相信90后或者80后都玩过这款小游戏,一直想干一票,琢磨一下,但又不太懂,于是网上搜集修改就有了以下效果!bug较多,多多包涵! 1.效果展示 2.实现方法 参 ...
- ASP.NET MVC+Vue.js实现联系人管理
接触了一天vue.js,简单浏览了一本关于vue的电子书,就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序. 先看一下这个联系人管理的小程序的界面,也就是我们大概要实现什么 ...
- 【CF666E】Forensic Examination 广义后缀自动机+倍增+线段树合并
[CF666E]Forensic Examination 题意:给你一个字符串s和一个字符串集合$\{t_i\}$.有q个询问,每次给出$l,r,p_l,p_r$,问$s[p_l,p_r]$在$t_l ...
- python2.7.X 升级至Python3.6.X
安装Python3 项目是在py3环境下进行编码的,正好yczhang默认的py版本是2,我们还需要安装py3才能让程序run起来,在此之前,需要安装开发工具包,因为要编译安装Python [root ...
- Vs code常用插件
Vs code常用插件 1.View In Browser 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firef ...
- laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)
如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...