配置动态路由参数id:

routes: [

// 动态路径参数 以冒号开头

{ path: '/user/:id', component: User }

]

html路由跳转:

<router-link to="/demo53/8">路径参数跳转</router-link>

①不带参数写法:

      <router-link to="home">点我</router-link>

      <router-link v-bind:to="'home'">点我</router-link>

      <router-link :to="'home'">Home</router-link>

      <router-link :to="{ path: 'home' }">Home</router-link>

② 带参数写法:

     A: <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

      批注:路由配置格式:

        { path: '/user/:userId', name: 'user', component: User }

       导航显示:/user/123  

     B: <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

        批注:带查询参数

           导航显示:/register?plan=private

 js中使用的方式:

    ① this.$router.push('xxx')                                                                  //字符串,这里的字符串是路径path匹配噢,不是router配置里的name

    ② this.$router.push({ path: 'home' })                                             //对象

    ③ this.$router.push({ name: 'user', params: { userId: 123 }})         // 命名的路由 这里会变成 /user/123

    ④ this.$router.push({ path: 'register', query: { plan: 'private' }})       // 带查询参数,变成 /register?plan=private

vue之this.$route.query和this.$route.params接收参数
this.$route.query
A页面传递参数peng=
registerInfoThis.$router.push("/hrhi/psninfo/dynamic/" + data.row.pk_psndoc + '?funcode=60070psninfo&peng=0');
B页面接收参数
created() {
this.penga = this.$route.query["peng"];
},

‘http://localhost:8080/linkParamsQuestion?age=18’

let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;

this.$route.params
、router/index.js
{
path:'/mtindex',
component: mtindex,
//添加路由
children:[
{
path:"/detail",
name:'detail',
component:guessdetail
}
] }, 、传参数( params相对应的是name query相对应的是path)
this.$router.push({
name: ‘detail’, params:{shopid: item.id}
}); 、获取参数
this.$route.params.shopid 、url的表现形式(url中没带参数)
http://localhost:8080/#/mtindex
 .检测路由 

  watch:{
    '$route': function (to,from) {
      // 对路由变化作出响应...
    }
  }
或者
watch: {
"$route": "routeChange",
}, methods: {
routeChange(){
console.log(this.$route.path);
} }

在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子了

<router-view :key="key"></router-view>

computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}

HttpGet请求拼接url参数

    const query = {
client_id: state.auth.clientID,
redirect_uri: location.href,
scope: 'public_repo'
} const queryString = Object.keys(query)
.map(key => `${key}=${encodeURIComponent(query[key] || '')}`)
.join('&') return `http://github.com/login/oauth/authorize?${queryString}`
    return vue.$http.get(`https://api.github.com/search/issues?q=${data.keyword}+state:open+repo:${vue.$store.getters.repo}${label}&sort=created&order=desc&page=${data.currentPage}&per_page=${data.pageSize}`, {
headers: {
'Accept': 'application/vnd.github.v3.html'
}
})

url参数转json字符串:

const queryParse = (search = window.location.search) => {
if (!search) {
return {}
} else {
const queryString = search[] === '?' ? search.substring() : search
const query = {}
queryString
.split('&')
.forEach(queryStr => {
const [key, value] = queryStr.split('=')
if (key) {
query[decodeURIComponent(key)] = decodeURIComponent(value)
}
})
return query
}
} const queryStringify = query => {
const queryString = Object.keys(query)
.map(key => `${key}=${encodeURIComponent(query[key] || '')}`)
.join('&')
return queryString
}
获取url参数
//方法封装
function GetRequest() {
    //获取url中"?"符后的字串
    var url = location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for(var i = 0; i < strs.length; i ++) {
        theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
          }
    }
    return theRequest;
}
// 方法调用
var Request = new Object();
Request = GetRequest();
var urlCan = Request['参数名'];
方法2:
function getUrlParam(key) {
    // 获取参数
    var url = window.location.search;
    // 正则筛选地址栏
    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
    // 匹配目标参数
    var result = url.substr(1).match(reg);
    //返回参数值
    return result ? decodeURIComponent(result[2]) : null;
}
//调用
getUrlParam("参数名");
参考:https://www.jianshu.com/p/f69fbc7cb06c

https://www.cnblogs.com/websmile/p/7873601.html      vue-router的用法

https://blog.csdn.net/zjl199303/article/details/82655576         vue 配置路由 + 用户权限生成动态路由 踩过的那些坑
https://blog.csdn.net/sangjinchao/article/details/70888259       vue,router-link传参以及参数的使用
https://blog.csdn.net/wojiaomaxiaoqi/article/details/80688911         vue中this.$router.push路由传参以及获取方法

路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数的更多相关文章

  1. 为什么返回的数据前面有callback? ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题

    为什么返回的数据前面有callback?   这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...

  2. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

  3. HttpGet 请求(带参数)

    package com.example.util; import java.io.BufferedReader;import java.io.IOException;import java.io.In ...

  4. HttpClient4.X发送Get请求的url参数拼接

    HttpClient4.X发送Get请求的参数拼接 使用httpClient发送get请求时,请求参数可以以?key=val&key1=val1的拼接到url后面. 但是请求参数较多时,这种方 ...

  5. ajax 跨域请求时url参数添加callback=?会实现跨域问题

    例如: 1.在 jQuery 中,可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据,如 "myurl?callback=?".jQuery 将自动替换 ? 为正确 ...

  6. Spring+MVC Controller层接收App端请求的中文参数乱码问题。

    在正文之前,说明下Filter的作用: 过滤器顾名思义就是进行过滤的,可以实现代码的定向执行和预处理.通俗点说法filter相当于加油站,request是条路,response是条路,目的地是serv ...

  7. 获取移除指定Url参数(原创)

    /// <summary> /// 移除指定的Url参数 /// 来自:http://www.cnblogs.com/cielwater /// </summary> /// ...

  8. react-router url参数更新 但是页面不更新的解决办法

    今天发现, 当使用react-router(v4.2.2)时,路由需要传入参数, 但是如果路由跳转时,url仅仅改变的是参数部分,如从hello/1跳转到hello/2,此时虽然参数更新了,但是页面是 ...

  9. 使用Typescript重构axios(三)——实现基础功能:处理get请求url参数

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

随机推荐

  1. 解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory

    最近因为工作需要要使用PHP 7,所以从网上找教程进行安装, 结果编译没问题, 安装的时候报了错误. 错误如下 1 2 3 cp -pR -f phar.phar /usr/local/php7/bi ...

  2. 【Distributed】分布式任务调度平台

    一.概述 什么是定时任务 二.Java实现定时任务方式 2.1 Thread 2.2 TimerTask 2.3 ScheduledExecutorService 2.4 Quartz 引入maven ...

  3. 微信小程序开发(十三)安卓手机调用wx.getConnectedWifi API失败

    安卓手机调用wx.getConnectedWifi API失败,返回的错误码是12000.需要先startWifi 接口: wx.startWifi({ success(res) { console. ...

  4. Jmeter练习

    首页 新随笔 管理   Jmeter接口测试实例-牛刀小试   本次测试的是基于HTTP协议的接口,主要是通过Jmeter来完成接口测试,借此熟悉Jmeter的基本操作. 本次实战,我是从网上找的接口 ...

  5. spark not serializable异常分析及解决方案

    转载自: http://bigdataer.net/?p=569 1.背景 在使用spark开发分布式数据计算作业过程中或多或少会遇到如下的错误: Serialization stack: objec ...

  6. Petrozavodsk Winter Training Camp 2018 Jagiellonian U Contest Problem A. XOR

    先把所有的数异或起来 得到sum 然后sum有一些位是1一些位是0 是0的位表示所有数里面有这位的数是偶数个 则无论怎么划分数 这一位对最终的答案都是不会有贡献的  因为偶数=偶数+偶数/奇数+奇数 ...

  7. tomcat配置CA证书后,https的接口url请求很慢,大概率会超时

    背景:项目需要使用websocket长连接,走nginx反向代理会断开,所以决定要直连项目 [websocket连接https需要使用wss] 项目端口: 项目名:biubiu https证书端口: ...

  8. ubuntu下后台服务的管理

    注册后台服务后都有脚本存在/lib/systemd/system路径下 如mysql为mysql.service 被service管理的进程被杀掉还是会重启的 应使用service XXX stop停 ...

  9. canvas制图学习

    <!DOCTYPE html> <html lang="zh-en"> <head> <meta charset="UTF-8& ...

  10. vue前端项目优化策略

    vue前端项目有什么优化策略? .生成打包报告.(可以发现一些问题,并进行解决)2.使用第三方库启用CDN加载3.使用Element-ui的话,按需加载组件4.使用路由懒加载 生成打包报告: .生成打 ...