目录
本文描述:
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>
总结起来,具体步骤如下:
- 导入
useRouter
方法:import { useRouter } from 'vue-router';
- 创建 Vue Router 实例:
const router = useRouter();
- 在函数中使用
router.push()
进行路由跳转:在相应函数中使用router.push('/path')
进行导航。以上步骤将允许您在函数中使用配置好的Vue Router进行路由跳转。请确保在相应的组件和函数中正确导入和创建Vue Router实例,并在需要的地方调用
router.push()
方法进行导航。