Implémenter le saut de page sans utiliser de lien de routeur-js tutoriel-php.cn

Implémenter le saut de page sans utiliser de lien de routeur

php中世界最好的语言

Libérer： 2018-04-28 15:08:54

original

3720 Les gens l'ont consulté

Cette fois, je vais vous apporter les précautions concernant le fait de ne pas utiliser le lien de routeur pour réaliser un saut de page et de ne pas utiliser le lien de routeur pour réaliser le saut de page. Vous trouverez ci-dessous un cas pratique, jetons un coup d'œil.

1. Définir les événements pour le lieu de saut de la page parent

//原来的页面上展示的信息 
 <p v-if="!addShow" class="function"> 
 <el-row> 
  <template slot-scope="scope"> 
   <el-button type="success" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>  
    //带参数进行编辑 
   <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button> 
  </template> 
 </el-row> 
</p> 
//要跳转过去的页面用隐藏来代替 
    <p v-if="addShow" class="add-category "> 
     <el-col :span="20" :offset="2"> 
      <el-form :model="formData" :rules="rules" ref="formData" label-position="left"> 
       <el-row> 
        <el-col :span="10"> 
         <el-form-item label="销售区域名称" prop="name"> 
          <el-input v-model="formData.name"></el-input>  
            //v-model绑定formData.name(name为需要的字段,formDataw为表格ref绑定的数据) 
         </el-form-item> 
        </el-col> 
       </el-row> 
       <el-col :span="18"> 
        <el-form-item label="销售区域描述"> 
         <el-input type="textarea" :rows="5" v-model="formData.description"></el-input> 
        </el-form-item> 
       </el-col> 
       <el-col :span="2" :offset="9"> 
        <el-button type="success" @click="handleSubmit(&#39;formData&#39;)" >确定</el-button> 
       </el-col> 
       <el-col :span="2" :offset="1"> 
        <el-button @click="onCancel">取消</el-button> 
       </el-col> 
      </el-form> 
     </el-col> 
    </p>

Copier après la connexion

2. Partie JS

data() { 
  addShow: false //设置要显示的页面部分默认为false，隐藏 
  checkdDistributor: null, 
}, 
methods: { 
// 编辑按钮 
    handleEdit(index,row){ 
      this.checkdDistributor = row; //接受传参 
      this.addShow = true; // addshow为要显示的页面  
    } 
} 
watch: { 
    // 带参数编辑 
    checkdDistributor(){ 
      for(let attr in this.formData){ 
        this.formData[attr] = ('' + this.checkdDistributor[attr]); //写入参数 
      } 
    } 
  },

Copier après la connexion

3. 🎜>

Supplément :

vue saut de lien de routeurvaleurexemple

1. lien de routeur

<router-link :to="{name:&#39;deitail&#39;,params:{freezeMon:&#39;2017-10&#39;,owerName:&#39;西安&#39;}}" tag="p" >
</router-link>

Copier après la connexion

2. >

3. Valeur

export default new Router({
 routes: [
   {
    path: '/',
    name: 'Index',
    component: Index
   },
   {
    path: '/deitail',
    name: 'deitail',
    component: deitail
   }
 ]
})

Copier après la connexion

4. Résumé : À quoi faut-il faire attention lorsque le lien du routeur saute et dépasse la valeur

* ? :

<h1>{{$route.params.freezeMon}}</h1>

Copier après la connexion

* La valeur du nom dans { après to doit être cohérente avec la valeur du nom dans l'itinéraire

* La méthode suivante est fausse

Je crois que vous l'avez maîtrisée après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

<router-link to="{path:&#39;/deitail&#39;,params:{freezeMon:&#39;2017-10&#39;,owerName:&#39;西安&#39;}}" tag="p" >
</router-link>

Copier après la connexion

Explication détaillée des étapes pour implémenter une barre de progression glissante en forme d'arc

Explication détaillée de l'utilisation des accessoires React et des attributs d'état

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!