vue3路由配置及路由跳转传参(vue如何配置路由)

vue3路由配置及路由跳转传参 1、安装路由npm i vue-router2、编写需要展示的路由

推荐整理分享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、編程式路由