Vue动态路由实现多页面切换

"Vue 嵌套路由使用总结（推荐）" 在 Vue.js 开发中，嵌套路由是一种常见的实现多级导航和复杂页面结构的方法。本文将详细介绍如何在 Vue 中设置和使用嵌套路由，以满足创建具有多个子页面的导航菜单的需求。 首先，我们来看一下开发环境：在 Windows 10 操作系统上，使用 Node.js 版本 v10.15.3。如果你还没有安装 Node.js，可以访问 https://nodejs.org/en/ 下载并安装。 需求场景是构建一个包含多个菜单选项的导航栏，点击每个菜单项时，页面下方的内容区域会根据选择加载不同的子页面组件。为了实现这个功能，我们需要利用 Vue Router 的动态路由特性。 1. 创建子页面组件 - 我们首先创建了 `home.vue` 文件，作为子页面组件。该组件包含了 `<template>`、`<script>` 和 `<style>` 部分，用于定义视图模板、数据和样式。在这个例子中，`home.vue` 显示一个 "home Page" 的标题和相关的内容。 - 同理，我们还创建了 `nav1.vue` 文件，作为另一个子页面组件，显示 "nav1Page" 的标题和内容。 2. 设置父页面 - 在 `index.vue` 文件中，我们创建了一个父页面组件。父页面包含一个导航栏（`.nav`）和一个内容区域（`.content`）。导航栏的每个菜单项（`<li>`）都有一个点击事件，通过 `@click` 监听器调用相应的方法。 - `clickHome` 方法会通过 `this.$router.push()` 将路由跳转到 "/index/home"，而 `clickNav1` 方法则跳转到 "nav1"。这里，`<router-view>` 是 Vue Router 用来插入对应路由组件的地方。 3. 配置路由 - 在项目中的 `router/index.js` 文件中，我们需要定义嵌套路由。例如，我们可以设定一个名为 "index" 的路由，其子路由分别为 "home" 和 "nav1"。每个子路由对应一个组件，即 `home.vue` 和 `nav1.vue`。这可以通过 `children` 属性在路由配置对象中完成。 ```javascript import Vue from 'vue' import Router from 'vue-router' import Index from '@/views/Index.vue' // 父页面组件 import Home from '@/views/Home.vue' // home 子页面组件 import Nav1 from '@/views/Nav1.vue' // nav1 子页面组件 Vue.use(Router) export default new Router({ routes: [ { path: '/index', component: Index, children: [ { path: 'home', component: Home }, { path: 'nav1', component: Nav1 } ] } ] }) ``` 4. 使用绝对路径和相对路径 - 在路由配置中，如果父路由是 `/index`，那么子路由的路径可以是相对于父路由的，如 `home` 和 `nav1`。在父页面组件中，通过 `this.$router.push()` 跳转时，可以直接写子路由的名字，因为它们是相对路径。 - 如果需要在其他组件中跳转到嵌套路由，就需要使用绝对路径，比如 `/index/home` 或 `/index/nav1`。 通过以上步骤，我们就成功实现了Vue嵌套路由的功能，使得点击导航栏菜单时，能够正确加载并显示对应的子页面内容。这种方式极大地提高了代码的组织性和可维护性，同时也为用户提供了一种平滑的导航体验。