jk美女视频,操美女视频在线,鞠婧祎吻戏的照片或视频

vue中this. r o u t e . q u e r y 和 t h i s . route.query和this. route.query和this.route.params & query傳參和params傳參的使用和區(qū)別

1.query傳參：

路由：

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { name:'register',path: '/register', component: register } 
      ]
    })

導(dǎo)航：

// 注意：這是 query 兩種傳參方式 一種是直接跳轉(zhuǎn)把字符串傳過(guò)去 一種是傳描述目標(biāo)位置的對(duì)象
    <router-link to="/login?id=10&name=zs">登錄</router-link>
    <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注冊(cè)</router-link>
    或
    <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注冊(cè)</router-link>
    
    
等同于：
this.$router.push('/login?id=10&name=zs')
this.$router.push({path:'/register',query:{id:5,name:'lili'}})
或
this.$router.push({name:'register',query:{id:5,name:'lili'}})

注意：jquery可以通過(guò)name或path來(lái)引入路由

2.params傳參

路由：

    var router = new VueRouter({
      routes: [
        { path: '/login/:id/:name', component: login },// 這里不傳入對(duì)應(yīng)的參數(shù)（:/id/:name） 刷新頁(yè)面 參數(shù)會(huì)消失,頁(yè)面中就丟失了數(shù)據(jù)
        { name:'register', path: '/register/:id/:name', component: register }
      ]
    })

導(dǎo)航：

// 注意：這是 params 兩種傳參方式 一種是直接跳轉(zhuǎn)把字符串傳過(guò)去 一種是傳描述目標(biāo)位置的對(duì)象
    <router-link to="/login/12/ls">登錄</router-link>
    <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注冊(cè)</router-link>
    
等同于：
this.$router.push('/login/12/ls')
this.$router.push({name:'register',params:{id:10,name:'lili'}})

注意：params只能通過(guò)name來(lái)引入路由，path會(huì)undefined

jquery傳參和params傳參的區(qū)別

1.用法上:

上文已經(jīng)提到query可以用name或path來(lái)引入
params必需要用name來(lái)引入，接收參數(shù)都是類似的，分別是:
this.$route.query.name和this.$route.params.name。

2.地址欄表現(xiàn)形式上:
query：

params：

注意：這里的12和ls 對(duì)應(yīng)的是/:id/:name 這兩個(gè)參數(shù)可以不寫那么就不會(huì)在地址欄上顯示不過(guò)刷新頁(yè)面參數(shù)會(huì)消失寫上參數(shù)刷新頁(yè)面參數(shù)不會(huì)消失

1.query方式傳參和接收參數(shù)

傳參:

this.$router.push({
        path:'/detail/:id',
        query:{
          id:id
        }
      })

接收參數(shù):

this.$route.query.id

Tips:

傳參是this.r o u t e r , 接收參數(shù) 是 t h i s . router,接收參數(shù)是this.route**r,接收參數(shù)是thi**s.route,這里千萬(wàn)要看清了?。?！

2.params方式傳參和接收參數(shù)

傳參:

this.$router.push({
        name:'Detail',
        params:{
          id:id
        }
      })

接收參數(shù):

this.$route.params.id

Tips:

params傳參，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因?yàn)閜arams只能用name來(lái)引入路由，如果這里寫成了path，接收參數(shù)頁(yè)面會(huì)是undefined！?。?/p>

另外，二者還有點(diǎn)區(qū)別：

接收參數(shù)

// query通過(guò)this.$route.query接收參數(shù)
created () {
    const id = this.$route.query.id;
}
 
// params通過(guò)this.$route.params來(lái)接收參數(shù)
created () {
    const id = this.$route.params.id;
}

切換路由

// query通過(guò)path切換路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail頁(yè)面</router-link>
// params通過(guò)name切換路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail頁(yè)面</router-link>復(fù)制代碼

簡(jiǎn)單說(shuō)query相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)，瀏覽器刷新頁(yè)面不會(huì)消失，而params相當(dāng)于post請(qǐng)求，參數(shù)不會(huì)在地址欄中顯示，瀏覽器刷新頁(yè)面后消失。

Vue監(jiān)聽(tīng)路由

方式一：監(jiān)聽(tīng)$router

復(fù)用組件時(shí)，想對(duì)路由參數(shù)的變化作出響應(yīng)的話，你可以簡(jiǎn)單地 watch（監(jiān)測(cè)變化） $route 對(duì)象：

  watch: {
    '$route' (to, from) {
      // 對(duì)路由變化作出響應(yīng)...
    }
  }

方式二：唯一值 key 屬性

Vue 為你提供了一種方式來(lái)聲明“這兩個(gè)元素是完全獨(dú)立的——不要復(fù)用它們”。只需添加一個(gè)具有唯一值的 key 屬性即可

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

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

使用computed屬性和Date()可以保證每一次的key都是不同的，這樣就可以如愿刷新數(shù)據(jù)了。

實(shí)踐

1. 定義路由

      {
          path: '/hse/problem/prMain/deal/:id',
          component: () => import('@/views/hse/Problem/PrDeal.vue'),
          meta: {
            keepAlive: true
          }
        },

2. 動(dòng)態(tài)路由傳參

 handleDeal(id){
              this.$router.push(
                {
                  path: `/hse/problem/prMain/deal/${id}`,
                  params: {id: id}
                }
              )
            }

3. 監(jiān)聽(tīng)路由

          watch:{
           //監(jiān)聽(tīng)路由
           $route(){
             if(this.$route.params!==null){
               this.paramId = this.$route.params.id;
             }
           },
            paramId(newVal,oldVal){
              if(newVal !== undefined && newVal !== null){
                  //初始化數(shù)據(jù)
                  this.init();
              }
            }
          }

4. init方法初始化數(shù)據(jù)

methods:{
              //初始化數(shù)據(jù)
              init(){
                let vm = this;
                vm.$nextTick(()=>{
                  vm.$axios.get(`/hse/sim/prProblem/v1/get/${vm.dataId}`).then(reply=>{
                    vm.form = reply.data;
                  }).catch(e=>{
                    vm.$toast.fail(e);
                  })
                })
              }
}

實(shí)例

routes: [
  // 寫法 (1)
  { //在路由中顯示傳遞的參數(shù)   
    path: '/skipIn/:name/:age', //傳遞兩個(gè)參數(shù)
    name: 'SkipIn',    //跳轉(zhuǎn)頁(yè)面的名字
    component: SkipIn  //注冊(cè)組件
  },
  
  // 寫法 (2)
  // { 
  //   path: '/skipIn',
  //   name: 'SkipIn',
  //   component: SkipIn
  // }
]

跳轉(zhuǎn)之前的頁(yè)面

<template>
  <div id="skip">
    <div class="Input">
  <el-form ref="form" :model="form" label-width="80px">
<el-row :gutter="20">
    <el-col :span="6">
<el-form-item label="姓名:">
  <el-input v-model="form.name" size="small"></el-input>
</el-form-item>
    </el-col>
  <el-col :span="6">
  <el-form-item label="年齡:">
<el-input v-model="form.age" size="small"></el-input>
  </el-form-item>
  </el-col>
    </el-row>
   </el-form>
 </div>
 <div class="footer">
<el-button type="primary" size="small" class="skipBtn" @click="skipBtn">路由跳轉(zhuǎn)</el-button>
 </div>
  </div>
</template>

<script>
  export default{
name:'RouterSkip',
data(){
  return{
form:{
  name: "",
  age: ""
}
  }
},
methods:{
  skipBtn: function(){
  // 寫法 1.如果以這種方式傳遞參數(shù)，那么路由的寫法要以(1)為準(zhǔn)。
  // url的表現(xiàn)形式為(url中帶參數(shù))：http://localhost:8080/#/skipIn/小明/20
    this.$router.push({ path: "/skipIn/" + this.form.name + "/" + this.form.age});
    
    // 寫法 2. 如果以這種方式傳遞參數(shù)，那么路由的寫法要以(2)就可以了。
    // url的表現(xiàn)形式為(url中不帶參數(shù))：http://localhost:8080/#/skipIn
this.$router.push({ name: 'SkipIn', params:{name: this.form.name, age:this.form.age}});
// 注：如果以2這種方式傳遞參數(shù)時(shí)，那么當(dāng)刷新跳轉(zhuǎn)后傳參的頁(yè)面，數(shù)據(jù)將不存在。

// 寫法 3. 如果以這種方式傳遞參數(shù)，那么路由的寫法要以(2)就可以了。
    // url的表現(xiàn)形式為(url中帶參數(shù))：http://localhost:8080/#/skipIn?name=小明&age=20
this.$router.push({ path: "/skipIn", query: {name: this.form.name, age:this.form.age}});
// 注：如果以1、3這種方式傳遞參數(shù)時(shí)，刷新跳轉(zhuǎn)后傳參的頁(yè)面，數(shù)據(jù)還會(huì)顯示存在。
  }
},
  }
</script>

<style lang="scss" scoped>
  #skip{
width: 100%;
height: 400px;
    background: #eee;
.Input{
  padding: 10px 20px;
}
.footer{
  width: 100%;
  background: #ccc;
  padding: 5px 20px;
  overflow: hidden;
  .skipBtn{
float: right;
  }
}
  }
</style>

跳轉(zhuǎn)之后的頁(yè)面

<template>
  <div id="skipIn">
<div class="header">
  <span class="info">{{msg}}</span>
  <el-button type="primary" size="small" class="backBtn" @click="back">
返回<i class="iconfont icon-fanhui back"></i>
  </el-button>
</div>
<div class="information">{{params}}</div>
  </div>
</template>

<script>
  export default{
name:'SkipIn',
data(){
  return{
msg: "路由傳參頁(yè)面",
params: ""
  }
},
methods:{
  back: function(){
this.$router.go(-1); //返回
  },
  showInfo: function(){
    // 對(duì)應(yīng)寫法 1. 2. 獲取傳過(guò)來(lái)的參數(shù)
  this.params = this.$route.params.name;

// 對(duì)應(yīng)寫法 3. 獲取傳過(guò)來(lái)的參數(shù)
this.params = this.$route.query.name;
  }
},
mounted(){
  this.showInfo();
}
  }
</script>

<style lang="scss" scoped>
  #skipIn{
  width: 100%;
  height: 400px;
  background: red;
  .header{
  width: 100%;
  background: #eee;
  padding: 5px 20px;
  overflow: hidden;
  .info{
  font-size: 14px;
  line-height: 32px;
   }
  .backBtn{
  float: right;
  .back{
  font-size: 14px;
  }
  }
  }
  .information{
  font-size: 20px;
  }
  }
</style>

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看