>  기사  >  웹 프론트엔드  >  Vue.js의 라우팅 매개변수

Vue.js의 라우팅 매개변수

php中世界最好的语言
php中世界最好的语言원래의
2018-03-13 14:38:081471검색

이번에는 Vue.js의 라우팅 매개변수를 가져왔습니다. Vue.js의 라우팅 매개변수 사용 시 주의사항은 무엇인가요? 다음은 실제 사례입니다.

기능: 페이지에 대한 라우팅 매개변수를 전달합니다.

라우팅 매핑 테이블에서 전달해야 하는 매개변수를 구성합니다.
예: Apple 페이지, 색상 매개변수를 전달해야 합니다. 다음으로 시작하는 매개변수를 설정할 수 있습니다. : 경로에.

path: '/apple/:color',

특정 용도:

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple/:color',      component: Apple
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

페이지로 이동할 때 주소 바로 뒤에 매개변수를 연결합니다. 아래 빨간색은 전달된 색상 매개변수입니다.

http://localhost:8080/apple/red

페이지에서 전달된 매개변수를 가져옵니다. $route .params global object를 통해

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="getParams">get params</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am componnet apple&#39;
      }
    },    methods: {
      getParams () {        console.log(this.$route.params)
      }
    }
  }</script>

를 얻으려면 위의 인쇄 결과는 다음과 같습니다.

{color: "red"}

템플릿 태그의 인터페이스에서 전달된 매개변수를 사용하면 다음과 같은 작업을 수행할 수 있습니다. $route.params.color

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <p>{{$route.params.color}}</p>
    <button @click="getParams">get params</button>
  </div></template>

Vue.js의 라우팅 매개변수

여러 매개변수 전달

경로의 설정은 다음과 같습니다.

path: &#39;/apple/:color/detail/:type&#39;,

전달된 매개변수의 URL:

http://localhost:8080/apple/red/detail/3

전달된 모든 매개변수 인쇄:

{color: "red", type: "3"}

I 이 글의 사례를 읽으신 후 방법을 마스터하셨다고 믿으세요. 자세한 내용은 PHP 중국어 웹사이트에서 다른 관련 기사를 주목해 주세요!

추천 자료:

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

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

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

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