详解vue route介绍、基本使用、嵌套路由

Vue Router 详解

Vue Router 是 Vue.js 官方的路由管理器，它可以帮助我们在 Vue 应用中实现页面之间的导航和路由功能。本文将详细介绍 Vue Router 的基本使用和嵌套路由，并提供两个示例说明。

基本使用

首先，我们需要安装 Vue Router。可以通过 npm 或 yarn 进行安装：

npm install vue-router
# 或
yarn add vue-router

然后，在我们的 Vue 应用中，我们需要创建一个路由实例，并将其与 Vue 实例关联起来。在 main.js 文件中，我们可以这样配置：

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 在这里配置路由
  ]
})

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

在 routes 配置中，我们可以定义我们的路由。每个路由都是一个对象，包含 path 和 component 属性。path 表示路由的路径，component 表示该路径对应的组件。

例如，我们可以定义一个名为 Home 的组件，并将其与根路径 / 关联起来：

import Home from './components/Home.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    }
  ]
})

这样，当用户访问根路径时，将会渲染 Home 组件。

嵌套路由

Vue Router 还支持嵌套路由，即在一个组件中嵌套另一个组件的路由。这样可以更好地组织和管理我们的应用。

例如，我们可以创建一个名为 User 的组件，并在其中定义嵌套路由：

import User from './components/User.vue'
import UserProfile from './components/UserProfile.vue'
import UserPosts from './components/UserPosts.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

在上面的示例中，我们定义了一个名为 User 的组件，并在 /user/:id 路径下使用了嵌套路由。UserProfile 组件将会渲染在 /user/:id/profile 路径下，而 UserPosts 组件将会渲染在 /user/:id/posts 路径下。

示例说明

示例一：简单的页面导航

假设我们有两个组件：Home 和 About。我们希望在点击导航链接时，切换到对应的组件。

首先，我们需要在 routes 配置中定义这两个组件的路由：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

然后，在我们的模板中，我们可以使用 <router-link> 组件来创建导航链接：

<router-link to=\"/\">Home</router-link>
<router-link to=\"/about\">About</router-link>

这样，当用户点击导航链接时，Vue Router 会自动切换到对应的组件。

示例二：嵌套路由

假设我们有一个名为 User 的组件，它包含两个子组件：UserProfile 和 UserPosts。我们希望在访问 /user/:id 路径时，渲染 User 组件，并根据子路径渲染对应的子组件。

首先，我们需要在 routes 配置中定义这些组件的路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

然后，在 User 组件的模板中，我们可以使用 <router-view> 组件来渲染子组件：

<router-view></router-view>

这样，当用户访问 /user/:id 路径时，User 组件将会渲染，并根据子路径渲染对应的子组件。

以上就是 Vue Router 的详细介绍和基本使用方法，以及嵌套路由的示例说明。希望对你有所帮助！