超级英雄的导航之旅：动态路由和嵌套路由

news2024/9/25 11:19:11

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 介绍动态路由的概念和用法
- 处理带参数的路由
- 创建嵌套路由的结构和用法

介绍动态路由的概念和用法

动态路由是指根据不同的参数或路径生成的路由。它允许我们根据特定的值动态创建路由，而不是在路由配置时硬编码地写入所有可能的路由。

动态路由的概念和用法如下：

定义动态路由路径：在路由配置中，可以使用冒号（:）来定义动态片段，表示该部分路径可以根据特定的值动态生成。

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: UserDetail
    }
  ]
});

在上述代码中，路径 /users/:id 中的 :id 是一个动态片段，表示该部分路径可以匹配任意的值。

访问动态路由参数：在路由组件中，可以通过 $route.params 来访问动态路由的参数。

// UserDetail.vue
export default {
  created() {
    const userId = this.$route.params.id;
    // 使用 userId 做相应的操作，例如获取用户信息
  }
};

在上述代码中，使用 this.$route.params.id 可以获取路由的动态参数 id，并在组件中使用。

监听动态路由的变化：如果动态路由的参数发生变化，可以监听 $route 对象的变化，并通过钩子函数或观察者来处理。

钩子函数方式监听：

// UserDetail.vue
export default {
  beforeRouteUpdate(to, from, next) {
    const userId = to.params.id;
    // 根据新的 userId 做相应的操作
    next();
  }
};

观察者方式监听：

// UserDetail.vue
export default {
  watch: {
    '$route' (to, from) {
      const userId = to.params.id;
      // 根据新的 userId 做相应的操作
    }
  }
};

通过钩子函数或观察者，可以在动态路由参数发生变化时进行相应的操作，例如重新加载数据或更新组件。

动态路由允许我们根据不同的参数或路径生成路由，使得应用更灵活和可扩展。它适用于需要根据不同资源或实体显示不同内容的情况，例如显示不同用户的详细信息或不同文章的内容。

处理带参数的路由

处理带参数的路由是 Vue Router 中常见的需求之一。你可以使用动态路由或查询参数来处理带参数的路由。下面我将分别介绍它们的概念和用法：

动态路由参数：
动态路由参数是将参数直接嵌入到路由的路径中。例如，对于路径 /users/:id，其中的 :id 就是一个动态路由参数。可以通过动态路由参数来实现根据不同的参数值动态生成路由。

定义动态路由路径时，在路由配置中使用冒号（:）来定义动态片段：

const router = new VueRouter({
  routes: [
    {
      path: '/users/:id',
      component: UserDetail
    }
  ]
});

访问动态路由参数时，在路由组件中使用 $route.params 来获取参数的值：

// UserDetail.vue
export default {
  mounted() {
    const userId = this.$route.params.id;
    // 使用 userId 做相应的操作，例如获取用户信息
  }
};

查询参数：
查询参数是以键值对的形式出现在 URL 中的参数。它们通常用于筛选、排序或传递其他可选参数。

定义带查询参数的路由路径时，可以使用 query 字段来指定查询参数：

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

在页面跳转时，可以通过 $router.push 方法传递查询参数：

this.$router.push({
  path: '/search',
  query: {
    keyword: 'Vue',
    page: 1
  }
});

在路由组件中，可以通过 $route.query 来获取查询参数的值：

// SearchResults.vue
export default {
  mounted() {
    const keyword = this.$route.query.keyword;
    const page = this.$route.query.page;
    // 使用 keyword 和 page 做相应的操作，例如进行搜索结果展示
  }
};

通过查询参数，你可以在 URL 中传递一些可选的参数，从而实现不同的页面展示和功能触发。

以上是处理带参数的路由的概念和用法，你可以根据你的具体需求选择合适的方式。

创建嵌套路由的结构和用法

嵌套路由是指在 Vue Router 中创建具有父子关系的路由结构。通过嵌套路由，你可以在应用程序中创建层次结构和组织路由，以更好地管理和展示你的页面。

下面是创建嵌套路由的结构和用法：

定义父路由和子路由：
在路由配置中，可以定义父路由和子路由。父路由用于对应一个页面组件，而子路由则是该页面组件内的子组件的路由。

const router = new VueRouter({
  routes: [
    {
      path: '/users',
      component: Users,
      children: [
        {
          path: 'profile',
          component: UserProfile
        },
        {
          path: 'settings',
          component: UserSettings
        }
      ]
    }
  ]
});

在上述代码中，/users 是父路由的路径，对应的组件是 Users。Users 组件内部有两个子组件的路由，即 /users/profile 对应 UserProfile 组件，/users/settings 对应 UserSettings 组件。

在父组件中设置 <router-view>：
在父路由对应的组件模板中，添加 <router-view> 指令来标记子组件的出口位置。

<!-- Users.vue -->
<template>
  <div>
    <h1>Users Page</h1>
    <router-view></router-view> <!-- 子组件的路由将在此处渲染 -->
  </div>
</template>

在上述代码中，<router-view> 指令将作为子组件路由的渲染位置。

切换子路由：
在父组件的模板中，可以使用 <router-link> 组件来切换不同的子路由。

<!-- Users.vue -->
<template>
  <div>
    <h1>Users Page</h1>
    <router-link to="/users/profile">Profile</router-link>
    <router-link to="/users/settings">Settings</router-link>
    <router-view></router-view>
  </div>
</template>