vue3路由配置以及路由跳转传参详解

更新时间：2023年04月18日 08:57:05 作者：努力学前端Hang

路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于vue3路由配置以及路由跳转传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1、安装路由

npm i vue-router

2、编写需要展示的路由

在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 router

3、使用路由

在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、編程式路由

声明式路由通过router-link进行路由跳转，編程式路由通过函数实现

修改app.vue，vue3使用的是组合式API，需要引入

要引入useRouter,useRoute,还要

const router=useRouter()

const route=useRoute()

<template>
  <router-view></router-view>
  <hr>
  <div>
    <button @click="toStudent">到student路由</button>
    <br>
    <button @click="toPerson">到person路由</button>
  </div>
</template>
 
<script setup>
import {useRouter,useRoute} from 'vue-router'
const router=useRouter()
const route=useRoute()
const toStudent=()=>{
  router.push('student')
}
const toPerson=()=>{
  router.push('person')
}
</script>
<style scoped>
 
</style>

通过router.push进行路由跳转

路由之间用router路由器，当前路由使用toute路由

结果如下图所示，实现編程式路由跳转

如果在配置路由时没有设置别名，需要通过router.push配置对象进行跳转

const toStudent=()=>{
  router.push({
    path:'/student'
  })
}
const toPerson=()=>{
  router.push({
    path:'/person'
  })
}

5、路由传参

5、1query参数传递

向student路由传递id,name

const toStudent=()=>{
  router.push({
    path:'/student',
    query:{
      id:1,
      name:'张三'
    }
  })
}

student路由接收query参数

<template>
    学生组件
    <div>{{data.query}}</div>
</template>
 
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    query: route.query
})
</script>

效果如下图所示

5、2传递params参数

假设向person路由传递params参数，要在路由配置时进行修改

params传参需要使用name进行指定路由

const toPerson=()=>{
  router.push({
    name:'person',
    params:{
      keyword:2
    }
  })
}

同时在路由配置需要修改，假设传递的是keyword，

需要在path使用占位符加关键字

？表示可传可不传

{
      component:()=>import('../pages/person.vue'),
      name:'person',
      path:'/person/:keyword?'
},

在person.vue中接收params参数

<template>
    人类组件
    <div>{{data.params.keyword}}</div>
</template>
 
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    params: route.params
})
</script>

效果如下所示

6、子路由配置

给student路由添加子组件(stu1，stu2组件)

子组件的path不带 /

{
            component:()=>import('../pages/student.vue'),
            name:'student',
            path:'/student',
            children:[
                {
                    path:'stu1',
                    name:'stu1',
                    component:()=>import('../pages/stu1.vue')
                },
                {
                    path:'stu2',
                    name:'stu2',
                    component:()=>import('../pages/stu2.vue')
                },
                {
                    path:'',
                    component:()=>import('../pages/stu1.vue')
                }
            ]
        }

编写stu1组件

<template>
stu1
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
 
</style>

编写stu2组件

<template>
stu2
</template>
 
<script setup>
 
</script>
 
<style scoped lang="less">
 
</style>

在student组件进行子组件展示

<template>
    学生组件
    <div>{{data.query}}</div>
    子组件展示
    <router-view></router-view>
    <router-link to="/student/stu1">到stu1</router-link>
    <router-link to="/student/stu2">到stu2</router-link>
</template>
 
<script setup>
import { reactive } from 'vue';
import {useRouter,useRoute} from 'vue-router'
const route=useRoute()
let data=reactive({
    query: route.query
})
</script>

通过使用router-link进行路由跳转，也可以通过編程式路由跳转

to="/student/stu1" 需要使用完整路径进行跳转

效果展示

总结

到此这篇关于vue3路由配置以及路由跳转传参的文章就介绍到这了,更多相关vue3路由配置及跳转传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中的el-button样式自定义方式
这篇文章主要介绍了vue中的el-button样式自定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
浅谈vue 脚手架文件结构及加载过程
这篇文章主要介绍了vue脚手架文件结构及加载过程浅谈,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
基于Vue3封装实现图片查看器
这篇文章主要为大家详细介绍了如何基于Vue3封装实现一个图片查看器,可以点击图片放大和关闭放大的图片,感兴趣的小伙伴可以了解一下
2025-02-02
vue+element获取el-table某行的下标,根据下标操作数组对象方式
这篇文章主要介绍了vue+element获取el-table某行的下标,根据下标操作数组对象方式，具有很好的参考价值，希望对大家有所帮助。一起跟随想过来看看吧
2020-08-08
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
2022-09-09
mint-ui 时间插件使用及获取选择值的方法
下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue使用echarts实现立体柱形图
这篇文章主要为大家详细介绍了vue使用echarts实现立体柱形图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue中computed顺序、watch顺序、响应次数使用
这篇文章主要介绍了vue中computed顺序、watch顺序、响应次数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue 在单页面应用里使用二级套嵌路由
这篇文章主要介绍了vue 在单页面应用里使用二级套嵌路由，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue eslint报错:Component name “xxxxx“ should always be
新手在使用脚手架时总会报各种错,下面这篇文章主要给大家介绍了关于vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案,需要的朋友可以参考下
2022-07-07