教你快速上手Vue3配置路由（Vue-Router）

目录

本文描述：

环境需求：

路由配置：

①安装Vue Router依赖：

②创建路由文件：

③全局导入路由

使用方法：

①导入方法

②创建router实例

③使用router

④具体代码

---

本文描述：

vue3项目创建完成后使用vue-router配置路由并在页面中使用路由进行页面跳转的详细步骤

环境需求：

已经创建好了vue3项目，并可以正常运行

路由配置：

①安装Vue Router依赖：

（我使用的是pnpm包管理器，如果是其它npm，yarn就更换命令）

pnpm install vue-router@4

②创建路由文件：

在src/router目录下创建一个名为index.ts的文件，并按照以下示例配置您的路由：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Layout from '@/views/Layout.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Layout,
    children: [
      // 添加子路由
      // {
      //   path: '/example',
      //   name: 'Example',
      //   component: ExampleComponent,
      // },
    ],
  },
];

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

export default router;

可以使用children属性为主要的布局组件添加子路由。在这个示例中，注释部分显示了如何为ExampleComponent创建一个子路由

最后一句export default router表示该路由router已经导出可供使用

③全局导入路由

在Vue 3项目的入口文件src/main.ts中导入并使用Vue Router：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

使用方法：

如何在页面使用路由进行跳转呢？

例：（在函数中使用配置好的router进行路由跳转）

function handleLogin(){
  router.push('/indexView')
}

①导入方法

首先，在需要使用路由的组件中，导入useRouter方法来获取Vue Router实例：

import { useRouter } from 'vue-router';

②创建router实例

使用useRouter方法创建Vue Router实例。这将为您提供一个与Vue Router相关联的实例，可以用于进行路由跳转：

const router = useRouter()

③使用router

在函数中使用router.push()方法进行路由跳转。例如，在处理登录的函数中添加以下代码：

function handleLogin(){
  router.push('/indexView')
}

④具体代码

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()

function handleLogin(){
  router.push('/indexView')
}
</script>

总结起来，具体步骤如下：

1. 导入 useRouter 方法：import { useRouter } from 'vue-router';
2. 创建 Vue Router 实例：const router = useRouter();
3. 在函数中使用 router.push() 进行路由跳转：在相应函数中使用 router.push('/path') 进行导航。

以上步骤将允许您在函数中使用配置好的Vue Router进行路由跳转。请确保在相应的组件和函数中正确导入和创建Vue Router实例，并在需要的地方调用router.push()方法进行导航。