Vue.js 라우팅을 위한 기타 작업

이번에는 Vue.jsrouting의 다른 작업을 소개하겠습니다. Vue.js 라우팅을 다른 작업에 사용할 때 주의사항은 무엇인가요?

현재 경로를 기준으로 apple로 점프

   <router-link to="apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

루트 디렉터리로 점프하고 싶다면 /

   <router-link to="/apple">to apple</router-link>
    上面的和下面的区别    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>

apple 앞에

<template>
  <div id="app">
    <router-link :to="path">to apple</router-link>
    ......  </div></template><script>
  export default {
    data () {      return {        path: &#39;apple&#39;
      }
    }
  }</script>

를 추가하면 됩니다. 바인딩할 경우 경로를 동적으로 수정할 수도 있습니다

<router-link :to="&#39;apple&#39;">to apple</router-link>

If 바운드, 원하지 않음 경로를 동적으로 수정하려면 직접 작성할 수도 있습니다. 참고: apple은 작은따옴표로 묶어야 합니다. 그렇지 않으면 데이터로 이동하여 apple을 찾지 못하고 오류가 발생합니다.

object

가 보고됩니다

<router-link :to="{path:&#39;banana&#39;,param:{color:&#39;yellow&#39;}}">to banana</router-link>

매개변수를 전달할 수도 있습니다.

<router-link :to="&#39;apple&#39;" tag="li">to apple</router-link>

태그를 사용하여 링크를 li 태그로 변경할 수도 있습니다. 물론 다른 태그로 설정할 수도 있습니다

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

*위 내용은 모두 선언적 탐색입니다

합시다. 프로그래밍 방식 탐색을 경험해 보세요푸시 페이지를 통해 특정 태그로 이동할 수 있습니다

rrreee
응용 시나리오:

경로를 전환할 때마다 그에 대한 일부 작업을 설정합니다

예: 사용자가 로그인되어 있지 않은 경우 사용자의 로그인 상태를 확인하고, 프로그래밍 방식 탐색router를 통해 로그인 인터페이스로 이동합니다.before
Each(router.push('Login Interface'))

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 확인하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!

추천 자료:

Vue 태그 속성 및 Vue.js의 조건부 렌더링

Vue.js의 목록 렌더링 v-for 배열 객체 하위 구성 요소

Vue.js 사용 시 주의 사항은 무엇입니까

🎜

위 내용은 Vue.js 라우팅을 위한 기타 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!