Vue3 路由配置 + 路由跳转 + 路由传参（动态路由传参 + 普通路由传参）

Web - Nancy

已于 2024-06-12 16:34:43 修改

阅读量2.2w

点赞数 16

分类专栏： Vue3 文章标签：前端

于 2024-02-26 08:00:00 首次发布

本文链接：https://blog.csdn.net/m0_48968874/article/details/135937689

版权

Vue3 专栏收录该内容

28 篇文章

订阅专栏

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

效果

一、介绍

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

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

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

欢迎扫描下方二维码关注VX公众号

效果

一、介绍

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）动态路由传参 - 直接跟在地址后面