Vue.js에서 라우팅을 설정하는 방법

이번에는 Vue.js에서 라우팅을 설정하는 방법과 Vue.js에서 라우팅을 설정할 때 어떤 주의사항이 있는지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

① 경로 맵

main.js에서 vue-router 가져오기

'vue-router'에서 VRouter 가져오기

글로벌 라우팅 설정

Vue.use(VRouter)

라우터 인스턴스화

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

②routing 보기

효과를 얻으려면 app.vue 파일에

<template>  <div>
    ![](./assets/logo.png)    <!--
    访问apple的时候,将apple的视图塞到这个位置
    访问banana的时候,将banana的视图塞到这个位置
    -->
    <router-view></router-view>
  </div></template>

를 포함하세요.

3 라우팅 탐색

app.vue 파일에 라우터를 포함하세요. 링크 태그인 경우, 이 태그는 태그

to apple

특정 용도:

<template>
  <div id="app">
    ![](./assets/logo.png)    <!--
    访问apple的时候,将apple的视图塞到这个位置
    访问banana的时候,将banana的视图塞到这个位置
    -->
    <router-view></router-view>
    <router-link :to="{path:&#39;apple&#39;}">to apple</router-link>
    <router-link :to="{path:&#39;banana&#39;}">to banana</router-link>
  </div></template>

의 효과를 얻을 수 있습니다. 효과:

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

추천 자료:

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

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

Vue.js의 텍스트 렌더링

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