>  기사  >  웹 프론트엔드  >  라우터 링크를 사용하지 않고 페이지 점프 구현

라우터 링크를 사용하지 않고 페이지 점프 구현

php中世界最好的语言
php中世界最好的语言원래의
2018-04-28 15:08:543666검색

이번에는 페이지 점프를 구현하기 위해 라우터 링크를 사용하지 않고 페이지 점프를 구현하기 위해 라우터 링크를 사용하지 않는 것에 대한 참고를 가져오겠습니다. 아래는 실제 사례입니다.

1. 상위 페이지 점프 장소에 대한 이벤트를 설정합니다

//原来的页面上展示的信息 
 <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>

2.JS part

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]); //写入参数 
      } 
    } 
  },

3. 마지막으로 렌더링을 추가합니다

보충:

vue router-link jumpvalueexample

1, router-link

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

routes

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

<h1>{{$route.params.freezeMon}}</h1>
4. 주의

* before to를 추가해야 합니다.

* { after to의 이름 값은 경로의 이름 값과 일치해야 합니다.
* 다음 방법은 잘못되었습니다.

<router-link to="{path:&#39;/deitail&#39;,params:{freezeMon:&#39;2017-10&#39;,owerName:&#39;西安&#39;}}" tag="p" >
</router-link>
사례를 읽으신 후 마스터하셨을 것입니다. 이 기사에서 방법에 대해 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

호 모양의 드래그 진행률 표시줄을 구현하는 단계에 대한 자세한 설명

React props 및 상태 속성 사용에 대한 자세한 설명

위 내용은 라우터 링크를 사용하지 않고 페이지 점프 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.