位置: IT常识 - 正文
vue3路由配置及路由跳转传参(vue如何配置路由)
编辑：rootadminvue3路由配置及路由跳转传参 1、安装路由npm i vue-router2、编写需要展示的路由
本文链接地址:https://www.jiuchutong.com/zhishi/298356.html
转载请保留说明！
推荐整理分享vue3路由配置及路由跳转传参(vue如何配置路由)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue 路由配置参数,vue3.0路由,vuecli3路由配置,vue3 路由,vue3.0路由配置,vue3 路由,vue3.0路由配置,vuecli3路由配置,内容如对您有帮助，希望把文章链接给更多的朋友！
在src目录下创建pages文件夹，里面创建两个vue文件命名为student.vue,person.vue
分别编写两个vue文件
student.vue和person.vue
<template> 学生</template><script setup></script><style scoped lang="less"></style><template>人类</template><script setup></script><style scoped lang="less"></style>3、配置路由在src目录下配置router.js文件
import { createRouter,createWebHistory } from "vue-router";const router=createRouter({ history:createWebHistory(), routes:[ { component:()=>import('../pages/person.vue'), name:'person', path:'/person' }, { component:()=>import('../pages/student.vue'), name:'student', path:'/student' }, { //实现路由重定向，当进入网页时，路由自动跳转到/student路由 redirect:'/student', path:'/' } ]})export default router3、使用路由在main.js中使用路由
import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app')在app.vue中进行路由展示，使用router-link进行路由跳转，to代表跳转到哪个路由
<template> <router-view></router-view> <hr> <div> <router-link to="/student">到student路由</router-link> <br> <router-link to="/person">到person路由</router-link> </div></template><script setup></script><style scoped></style>效果如下图所示，点击（到student路由）或（到person路由）会进行路由跳转
4、編程式路由下一篇：适合我的前端学习路线（学习前端不迷路）(前端必学课程)
