首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 嵌套路由和编程式路由

Vue3中嵌套路由和编程式路由的实现

2023-12-26 10:04:11 作者：专业研究祖传Bug编写术

Vue Router在Vue.js的核心库上提供了路由的功能,使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能,本文主要介绍了Vue3中嵌套路由和编程式路由的实现,感兴趣的可以了解一下

Vue3中的路由使用的是Vue Router库，它是一个官方提供的用于实现应用程序导航的工具。Vue Router在Vue.js的核心库上提供了路由的功能，使得我们可以在单页应用中实现页面的切换、跳转和参数传递等功能。

一、嵌套路由

在Vue.js 3中，嵌套路由允许我们在一个页面中创建多个层次的子路由。这可以帮助我们组织和管理复杂的应用程序结构。

要使用嵌套路由，我们需要使用Vue Router来设置路由。具体步骤如下：

首先，安装Vue Router。可以使用npm或yarn等包管理器进行安装：

npm install vue-router@next

在main.js（或其他适当的文件）中导入Vue Router，并创建一个新的路由实例：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 在这里定义顶级路由和嵌套路由
  ]
})

createApp(App).use(router).mount('#app')

在路由配置中，我们可以定义顶级路由和嵌套路由。嵌套路由使用children属性，其中可以定义子路由。

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About,
    children: [
      {
        path: '',
        component: AboutHome
      },
      {
        path: 'info',
        component: AboutInfo
      },
      {
        path: 'contact',
        component: AboutContact
      }
    ]
  }
]

在上面的示例中，我们定义了两个路由：根路由’/‘和嵌套路由’/about’。嵌套路由有3个子路由：‘/’、‘/info’和’/contact’。

在App.vue中，我们可以使用组件来显示当前路由的内容：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

在子组件中，我们可以通过路由对象$router来导航到嵌套路由：

<template>
  <button @click="$router.push('/about/info')">Go to About Info</button>
</template>

以上就是Vue 3中使用嵌套路由的基本步骤。通过嵌套路由，我们可以构建复杂的页面布局和导航结构。

下面是一个完整的示例，展示了如何在Vue 3中使用嵌套路由：

// main.js

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'
import AboutHome from './components/AboutHome.vue'
import AboutInfo from './components/AboutInfo.vue'
import AboutContact from './components/AboutContact.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      children: [
        {
          path: '',
          component: AboutHome
        },
        {
          path: 'info',
          component: AboutInfo
        },
        {
          path: 'contact',
          component: AboutContact
        }
      ]
    }
  ]
})

createApp(App).use(router).mount('#app')

<!-- App.vue -->
<template>
  <div>
    <h1>Vue Router Nesting Example</h1>
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->
<template>
  <div>
    <h2>Home</h2>
    <p>Welcome to the homepage</p>
  </div>
</template>

<!-- About.vue -->
<template>
  <div>
    <h2>About</h2>
    <router-link to="/about">Home</router-link>
    <router-link to="/about/info">Info</router-link>
    <router-link to="/about/contact">Contact</router-link>
    <router-view></router-view>
  </div>
</template>

<!-- AboutHome.vue -->
<template>
  <div>
    <p>Information about the company</p>
  </div>
</template>

<!-- AboutInfo.vue -->
<template>
  <div>
    <p>Contact information</p>
  </div>
</template>

<!-- AboutContact.vue -->
<template>
  <div>
    <p>Contact details</p>
  </div>
</template>

在上述示例中，我们创建了一个简单的嵌套路由结构，其中包含主页、关于页面和关于页面的子页面。点击About页面上的链接，可以动态加载相应的子页面。

二、编程式路由

编程式路由是指通过编码来进行路由的跳转和导航，而不是通过用户的交互操作来实现。在Vue 3中，使用编程式路由可以使用router实例的方法来实现。

首先，我们需要在Vue应用程序的根实例中创建一个路由器实例。可以使用createRouter函数来创建一个新的路由器实例，并将其挂载到Vue应用程序上。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp(App)
app.use(router)
app.mount('#app')

在上述例子中，我们创建了一个简单的路由器实例，该实例具有一个基本路由，该路由将根路径/映射到名为Home的组件。

然后，我们可以在Vue组件中使用router实例的方法来进行编程式导航。

export default {
  methods: {
    goToHome() {
      this.$router.push('/')
    }
  }
}

在上述示例中，我们定义了一个名为goToHome的方法，当调用该方法时，将路由导航到根路径/。

除了push方法外，router实例还提供了其他导航方法，例如replace，go，back和forward，可以根据具体需要选择适合的方法。

// 替换当前路由
this.$router.replace('/other-path')

// 在浏览器历史记录中后退一步
this.$router.back()

// 在浏览器历史记录中前进一步
this.$router.forward()

// 向前或向后导航几个步骤
this.$router.go(1)  // 前进一步
this.$router.go(-1)  // 后退一步

通过使用这些方法，我们可以在Vue 3中实现编程式路由。这对于需要在组件之间进行动态导航的情况非常有用。

在使用编程式路由时，有几个需要注意的地方：

获取router实例： 在Vue 3中，可以通过this.$router来获取路由器实例。但是需要注意的是，在使用this.$router之前，需要确保已经通过app.use(router)将路由器实例挂载到Vue应用程序上。
组件中的this指向问题： 在Vue 3中，组件的选项中没有this属性，因此无法直接使用this来访问$router实例。为了解决这个问题，可以使用inject和provide提供和注入router实例。
```
// 在main.js中提供router实例
app.provide('router', router)

// 在组件中注入router实例
export default {
  inject: ['router'],
  methods: {
    goToHome() {
      this.router.push('/')
    }
  }
}
```
通过在根组件中提供router实例，并在组件中注入，可以解决在组件中使用编程式路由时的this指向问题。
引入路由相关的函数： 在Vue 3中，需要使用createRouter和createWebHistory这两个函数来创建路由器实例和路由历史实例。需要确保正确引入这些函数。
```
import { createRouter, createWebHistory } from 'vue-router'
```
路由跳转的路径格式： 在编程式路由中，需要注意路由路径的格式。路径应该是字符串，并以斜杠/开头。
```
this.$router.push('/home')  // 正确
this.$router.push('home')   // 错误，缺少斜杠
```
路由导航的生命周期钩子： 在Vue 3中，路由导航的生命周期钩子函数有所变化。可以使用beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave等生命周期钩子函数来处理路由的导航。需要注意根据Vue 3的生命周期钩子函数文档来使用正确的钩子函数。

这些就是在使用编程式路由时需要注意的主要方面。确保在使用编程式路由时遵循这些注意事项，可以避免常见的问题和错误。

到此这篇关于Vue3中嵌套路由和编程式路由的实现的文章就介绍到这了,更多相关Vue3 嵌套路由和编程式路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Vue3中嵌套路由和编程式路由的实现

一、嵌套路由

二、编程式路由

您可能感兴趣的文章: