IT이야기

vue-로 경로 변경

cyworld 2022. 6. 16. 22:19
반응형

vue-로 경로 변경

나는 가지고 있다<router-link to = "/ endreco / test">단, 다음과 같은 동작을 vue-material 탭에서 수행해야 합니다.<md-tab md- icon = "books">루트를 바꿀 수 있는 방법은href = ""

어떻게 해야 하나?

vue.js, vue-router를 사용하여 vue-material로 경로와 스타일을 제어합니다.

를 추가할 수 있습니다.@click.native수동으로 루트에 푸시하기 위한 핸들러(컴포넌트에는 다음 컴포넌트가 없기 때문에 수식자가 필요)click이벤트):

<md-tab @click.native="$router.push('/endreco/test')">

다음은 Vue Router를 사용한 프로그래밍 탐색에 대한 문서입니다.

내 코드를 봐. 나는 라우터로 이동하여 언급된 컴포넌트 이름의 경로를 확인하는 방법을 구현했습니다. 쉽게 아이디어를 얻을 수 있습니다.

<template>
  <div>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--3-col mdl-cell mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
        <div class="image-card" v-for="picture in this.pictures" @click="displaydetails(picture.id) ">
          <div class="image-card__picture">
            <img :src="picture.url" />
          </div>
          <div class="image-card__comment mdl-card__actions">
            <span>{{ picture.comment }}</span>
          </div>
        </div>
      </div>
    </div>
    <router-link class="add-picture-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored" to="/postview">
      <i class="material-icons">add</i>
    </router-link>
  </div>
</template>
<script>
import data from '../data'
export default {
 data() {
     return{
         'pictures' : data.pictures 
     }
 },
 methods :{
     displaydetails (id){
         this.$router.push({name:'detailview', params:{id:id}});
         console.log("helo");
     }
 }
}
</script>

뭔가 재치 있는 것을 얻길 바라!

언급URL : https://stackoverflow.com/questions/46122922/change-route-with-vue-router-link

반응형