首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue路由配置路由跳转传参

Vue3 路由配置 + 路由跳转 + 路由传参的操作方法(动态路由传参 + 普通路由传参)

2025-05-21 10:13:32 作者：Web - Nancy

这篇文章主要介绍了Vue3 路由配置 + 路由跳转 + 路由传参的操作方法(动态路由传参 + 普通路由传参),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

Vue Router： Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。

效果

一、介绍

1、官方文档：https://router.vuejs.org/zh/introduction.html

介绍 | Vue RouterVue.js 的官方路由

https://router.vuejs.org/zh/introduction.html

2、功能：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

二、准备工作

1、安装依赖包

npm install vue-router@4

2、示例版本

"vue-router": "^4.2.5",

三、目录结构

src
│  App.vue
│  main.ts
│      
├─router
│   index.ts
│      
└─view
    HomeView.vue
    AboutView.vue
    TestView.vue

四、使用步骤

1、新建页面（含当前页面完整示例代码）

HomeView.vue

<template>
  <div>
    <div>这是home页面</div>
    <div>
      <button @click="toAboutPage">跳转至about</button>
    </div>
    <div>
      <button @click="toTestPage">跳转至test</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toAboutPage() {
  router.push({
    path: '/about',
    query: {
      title: '666'
    }
  })
}
function toTestPage() {
  router.push({
    path: '/test/' + 888,
  })
}
</script>

AboutView.vue

<template>
  <div>
    <div>这是about页面</div>
    <div>
      <button @click="toHomePage">跳转至home</button>
    </div>
    <div>
      <button @click="toTestPage">跳转至test</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
function toHomePage() {
  router.push({
    name: 'home',
    params: {
      title: 'about'
    }
  })
}
function toTestPage() {
  router.push({
    name: 'test',
    params: {
      title: 111
    },
  })
}
console.log(route);
</script>

TestView.vue

<template>
  <div>
    <div>这是test页面</div>
    <button @click="toHomePage">跳转至home</button>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
function toHomePage() {
  router.push('/')
}
console.log(route);
</script>

2、路由配置

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

routet/index.ts

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/test',
      name: 'test',
      component: () => import('../views/TestView.vue')
    },
  ]
})
export default router

App.vue

<template>
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>
  <RouterView />
</template>
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

五、路由跳转

1、使用 router-link 组件进行导航 + 通过传递 `to` 来指定链接

<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>

2、编程式导航

router.push('/') // 根页面，这里的“/”等同于home页面
router.push({
  path: '/about',
})

注：必须配置下列代码

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

六、路由传参

1、普通路由

1）query

router.push({
    path: '/about',
    query: {
      title: '666'
    }
  })

2）params

 
  router.push({
    name: 'home',
    params: {
      title: 'about'
    }
  })

2、动态路由

路由配参

    {
      path: '/test/:title',
      name: 'test',
      component: () => import('../views/TestView.vue')
    },

动态传参

 
  router.push({
    path: '/test/' + 888,
  })

接收参数

 console.log(route);

打印结果

注：路由之间跳转用router，获取当前页面的路由信息用route

3、对比普通路由和动态路由在浏览器的展现形式

1）普通路由传参 - 有问号

2）动态路由传参 - 直接跟在地址后面

到此这篇关于Vue3 路由配置 + 路由跳转 + 路由传参的操作方法(动态路由传参 + 普通路由传参)的文章就介绍到这了,更多相关vue路由配置路由跳转传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！