菜单路由配置

创建路由配置

// 引入Vue Router
import { createRouter, createWebHistory } from 'vue-router';

// 引入组件
import HomeComponent from './components/HomeComponent.vue';
import AboutComponent from './components/AboutComponent.vue';

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'about',
    component: AboutComponent
  }
];

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

在Vue应用中安装路由器

// 引入Vue和App组件
import { createApp } from 'vue';
import App from './App.vue';

// 引入路由器
import router from './router';

// 创建Vue应用实例
const app = createApp(App);

// 使用路由器
app.use(router);

// 挂载Vue应用实例到DOM
app.mount('#app');

利用useRouter实现编程式导航

useRouter是一个函数，它返回路由器实例。这个实例提供了编程式导航的方法，如push、replace和go，以及其他路由器的方法和属性。当你需要在组件中执行路由跳转或访问路由器实例的其他功能时，可以使用useRouter。

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    // 使用router实例进行编程式导航
    const navigateToHome = () => {
      router.push('/');
    };
    return {
      navigateToHome,
      // ...
    };
  }
};

useRouter结合命名路由的配置来解析路径

const routes = [
  {
    path: '/menu0/menu1',
    name: 'menu1',
    component: Menu1Component
  },
  {
    path: '/menu0/menu1/menu2',
    name: 'menu2',
    component: Menu2Component
  },
// 其他路由配置...
];

然后，可以使用router.push来导航到menu2：

router.push({ name: 'menu2', query: { id: id } });

这将会导航到/menu0/menu1/menu2?id=yourIdValue

命名路由中的名字必须和已经定义的路由规则相匹配。