Vue Router를 사용하여 다단계 경로 중첩 및 일치를 구현하는 방법은 무엇입니까?-View.js-php.cn

Vue Router를 사용하여 다단계 경로 중첩 및 일치를 구현하는 방법은 무엇입니까?

PHPz

풀어 주다： 2023-07-21 22:00:30

원래의

1870명이 탐색했습니다.

Vue Router를 사용하여 다단계 경로 중첩 및 일치를 구현하는 방법은 무엇입니까?

Vue Router는 Vue.js의 공식 라우팅 관리자로, 단일 페이지 애플리케이션(SPA)에서 라우팅 기능을 구현하는 데 도움이 됩니다. Vue Router에서는 라우팅 테이블을 구성하여 다양한 라우팅 규칙을 정의하고 경로 점핑 및 매칭을 구현할 수 있습니다. 이 기사에서는 Vue Router를 사용하여 다중 레벨 경로 중첩 및 일치를 구현하는 방법에 중점을 둘 것입니다.

Vue Router 설치

먼저 프로젝트에 Vue Router를 설치해야 합니다. npm 또는 Yarn 명령을 사용하여 Vue Router를 설치할 수 있습니다.

npm install vue-router

로그인 후 복사

또는

yarn add vue-router

로그인 후 복사

라우팅 인스턴스 만들기

Vue 프로젝트에서 라우팅 인스턴스를 만들고 이를 Vue의 루트 인스턴스와 연결해야 합니다. 라우팅 인스턴스를 생성하기 전에 먼저 다양한 라우팅 규칙을 정의하기 위한 라우팅 테이블을 생성해야 합니다. 라우팅 테이블은 라우팅 구성 개체로 구성된 배열입니다. 각 라우팅 구성 개체에는 라우팅 경로와 해당 구성 요소가 포함되어 있습니다.

우리 프로젝트에 다음과 같은 다중 레벨 라우팅 중첩 구조가 있다고 가정합니다:

- Home
  - About
    - Contact
  - News
    - Detail

로그인 후 복사

라우팅 테이블에서 다음 라우팅 규칙을 정의할 수 있습니다:

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Contact from '@/components/Contact.vue'
import News from '@/components/News.vue'
import Detail from '@/components/Detail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'contact',
        name: 'Contact',
        component: Contact
      }
    ]
  },
  {
    path: '/news',
    name: 'News',
    component: News,
    children: [
      {
        path: 'detail',
        name: 'Detail',
        component: Detail
      }
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

로그인 후 복사

위 라우팅 테이블에서 우리는 다음 라우팅 규칙을 정의했습니다:

/ 경로에 해당하는 구성 요소는 Home.vue/路径对应的组件是Home.vue
/about路径对应的组件是About.vue
/about/contact路径对应的组件是Contact.vue
/news路径对应的组件是News.vue
/news/detail路径对应的组件是Detail.vue

配置根组件

在我们的Vue根实例中，我们需要将我们创建的路由实例与Vue的根实例关联起来，并将我们的路由组件渲染到Vue根实例中的<router-view>标签中。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

로그인 후 복사

在上述代码中，我们将我们创建的路由实例通过router选项注入到Vue根实例中，并通过$mount('#app')方法将Vue根实例挂载到id为app的DOM节点上。

使用<router-link>和<router-view>组件

在我们的Vue组件中，我们可以使用<router-link>组件来实现路由之间的跳转，使用<router-view>组件来渲染对应的路由组件。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/about/contact">Contact</router-link>
    <router-link to="/news">News</router-link>
    <router-link to="/news/detail">Detail</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

로그인 후 복사

在上述代码中，我们通过<router-link>组件定义了多个路由跳转链接，分别跳转到对应的路径。在<router-view>标签中，我们通过Vue Router来动态渲染对应的路由组件。

使用以上步骤，我们就可以在Vue项目中实现多级路由的嵌套和匹配。当我们点击不同的路由链接时，页面将会渲染对应的路由组件，实现页面的动态切换和嵌套。

总结

本文介绍了如何使用Vue Router来实现多级路由的嵌套和匹配。通过创建路由表，并在Vue根实例中关联路由实例，我们可以在Vue项目中定义多级路由规则，并实现路由之间的跳转和匹配。同时，我们还介绍了在Vue组件中如何使用<router-link>和<router-view>

/about 경로에 해당하는 구성 요소는 About.vue

/about/contact입니다. 경로에 해당하는 구성 요소는 Contact.vue