Vue从零到壹 | 轻松搞定导航菜单切换局部页面难题

2023-11-05 10:56:35

Vue中实现优雅的导航菜单切换局部页面

导航菜单切换局部页面

在Vue中使用导航菜单切换局部页面是一个常见场景，它可以为用户提供良好的交互体验。有几种方法可以实现此功能：

使用路由系统： Vue Router是Vue官方提供的路由系统，它提供<router-link>组件来实现菜单导航，并通过<router-view>组件展示局部页面。
使用组件化思想： 将页面拆分为可复用的组件，并根据需要动态加载这些组件。
使用keep-alive组件： 缓存已加载的组件，避免重复加载。

<template>
  <div>
    <ul>
      <li><router-link to="/goods">商品管理</router-link></li>
      <li><router-link to="/users">用户管理</router-link></li>
    </ul>

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

<script>
import { createRouter, createWebHistory } from 'vue-router';
import Goods from './views/Goods.vue';
import Users from './views/Users.vue';

export default {
  setup() {
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/goods', component: Goods },
        { path: '/users', component: Users },
      ],
    });

    return { router };
  },
};
</script>

默认栏目展示

在导航菜单切换局部页面时，可能需要默认展示某个子级内容，例如在商品管理页面默认展示“商品列表”子页面。有两种方法可以实现此功能：

使用重定向： 在路由配置中使用redirect属性将父级路径重定向到子级路径。
使用子路由： 在路由配置中使用children属性定义子路由，并在进入父级路径时默认加载第一个子路由。

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

<script>
import { createRouter, createWebHistory } from 'vue-router';
import GoodsList from './views/GoodsList.vue';
import GoodsAdd from './views/GoodsAdd.vue';
import GoodsEdit from './views/GoodsEdit.vue';

export default {
  setup() {
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        {
          path: '/goods',
          redirect: '/goods/list',
          component: { template: '<router-view></router-view>' },
          children: [
            { path: 'list', component: GoodsList },
            { path: 'add', component: GoodsAdd },
            { path: 'edit/:id', component: GoodsEdit },
          ],
        },
      ],
    });

    return { router };
  },
};
</script>

页面刷新

在刷新页面时，导航菜单中选中的菜单项可能会丢失。有几种方法可以解决此问题：

使用activeIndex属性： 使用Vue Router提供的activeIndex属性跟踪当前选中的菜单项，并在$route变化时更新此属性。
使用地址栏路径： Vue页面会根据地址栏路径显示相应组件，因此可以通过修改地址栏路径来实现刷新页面后选中的菜单项不变。
使用keep-alive组件： 将需要缓存的组件包裹在<keep-alive>组件中，这样这些组件在刷新页面后也不会重新加载。

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <router-link :to="item.path">{{ item.label }}</router-link>
      </li>
    </ul>

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

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

export default {
  setup() {
    const route = useRoute();
    const activeIndex = ref(-1);

    watch(
      () => route.path,
      (newValue, oldValue) => {
        if (newValue !== oldValue) {
          activeIndex.value = menuItems.findIndex(item => item.path === newValue);
        }
      }
    );

    return { menuItems, activeIndex };
  },
};
</script>