路由传值及获取参数,路由跳转，路由检测，this.$route.query和this.$route.params接收参数，HttpGet请求拼接url参数

配置动态路由参数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参数

最新文章

热门文章