如何使用JavaScript或Vue 2创建列表路由链接并实现路径留存跳转

核心实现逻辑 #

• 每个路由配置项补充两个必填属性：路由唯一标识name、路径展示名称meta.title，同时配置对应的访问路径path，路由按层级嵌套配置
• 全局监听路由跳转事件，每次路由切换时从框架自带的路由匹配栈（存储从根路由到当前路由的所有匹配项）中提取所有带title的路由，生成路径列表
• 渲染时用/分隔每个路径项，除当前页对应的最后一项外，其余项都绑定路由跳转事件，点击时跳转到对应路径

Vue3 + Vue Router 实现示例 #

路由配置代码 #

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    meta: { title: 'Home' }
  },
  {
    path: '/users',
    name: 'Users',
    component: () => import('@/views/Users.vue'),
    meta: { title: 'users' },
    children: [
      {
        path: 'user-list',
        name: 'UserList',
        component: () => import('@/views/UserList.vue'),
        meta: { title: 'user-list' },
        children: [
          {
            path: 'create',
            name: 'CreateUser',
            component: () => import('@/views/CreateUser.vue'),
            meta: { title: 'create' }
          }
        ]
      }
    ]
  }
]

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

面包屑组件代码 #

<!-- components/Breadcrumb.vue -->
<template>
  <div class="breadcrumb">
    <span v-for="(item, index) in breadcrumbList" :key="item.path">
      <span 
        v-if="index !== breadcrumbList.length - 1"
        class="link-item"
        @click="goToRoute(item.path)"
      >
        {{ item.title }}
      </span>
      <span v-else class="current-item">{{ item.title }}</span>
      <span v-if="index !== breadcrumbList.length - 1">/</span>
    </span>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const breadcrumbList = ref([])

// 路由变化时自动更新路径列表
watch(() => route.path, () => {
  breadcrumbList.value = route.matched
    .filter(item => item.meta?.title)
    .map(item => ({
      title: item.meta.title,
      path: item.path
    }))
}, { immediate: true })

const goToRoute = (path) => {
  router.push(path)
}
</script>

<style scoped>
.link-item {
  color: #1890ff;
  cursor: pointer;
  margin: 0 4px;
}
.current-item {
  color: #666;
  margin: 0 4px;
}
</style>

React + React Router v6 实现示例 #

路由配置代码 #

// router/index.js
import { createBrowserRouter } from 'react-router-dom'
import Home from '@/views/Home'
import Users from '@/views/Users'
import UserList from '@/views/UserList'
import CreateUser from '@/views/CreateUser'

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    meta: { title: 'Home' }
  },
  {
    path: '/users',
    element: <Users />,
    meta: { title: 'users' },
    children: [
      {
        path: 'user-list',
        element: <UserList />,
        meta: { title: 'user-list' },
        children: [
          {
            path: 'create',
            element: <CreateUser />,
            meta: { title: 'create' }
          }
        ]
      }
    ]
  }
])

面包屑组件代码 #

// components/Breadcrumb.jsx
import { useEffect, useState } from 'react'
import { useLocation, useNavigate, matchRoutes } from 'react-router-dom'
import { router } from '@/router'

const Breadcrumb = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const [breadcrumbList, setBreadcrumbList] = useState([])

  useEffect(() => {
    const matches = matchRoutes(router.routes, location)
    if (matches) {
      const list = matches
        .filter(item => item.route.meta?.title)
        .map(item => ({
          title: item.route.meta.title,
          path: item.pathname
        }))
      setBreadcrumbList(list)
    }
  }, [location.pathname])

  const goToRoute = (path) => {
    navigate(path)
  }

  return (
    <div className="breadcrumb">
      {breadcrumbList.map((item, index) => (
        <span key={item.path}>
          {index !== breadcrumbList.length - 1 ? (
            <span className="link-item" onClick={() => goToRoute(item.path)}>
              {item.title}
            </span>
          ) : (
            <span className="current-item">{item.title}</span>
          )}
          {index !== breadcrumbList.length - 1 && <span>/</span>}
        </span>
      ))}
    </div>
  )
}
export default Breadcrumb

注意事项 #

• 路由必须按业务层级嵌套配置，才能生成符合顺序的路径列表
• 不需要展示在路径列表的路由，直接删除meta.title属性即可自动过滤
• 动态路由（如/user/:id）可以在生成路径列表时，将title中的占位符替换为实际的路由参数值

内容的提问来源于stack exchange，提问作者Oeng Kim Chhay