路由傳值及獲取參數,路由跳轉，路由檢測，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=0
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
1、router/index.js
{
        path:'/mtindex',
        component: mtindex,
        //添加路由
        children:[
             {
                 path:"/detail",
                 name:'detail',
                 component:guessdetail
             }
        ]        

 },

2、傳參數（ params相對應的是name query相對應的是path）
this.$router.push({
name: ‘detail’, params:{shopid: item.id}
});


3、獲取參數
this.$route.params.shopid


4、url的表現形式(url中沒帶參數)
http://localhost:8080/#/mtindex

 

 3.檢測路由　

　　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[0] === '?' ? search.substring(1) : 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路由傳參以及獲取方法