vue3路由

原创 已于 2025-07-28 22:25:09 修改 · 1.4k 阅读 · 25 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
收录于
前端

当前文章被收录于：

前端
4 篇文章 0 人学习

前端学习。

订阅专栏 查看详情
于 2025-07-27 00:57:24 首次发布

文章目录

前言

  • 在前端ui界面的时候我们需要跳转路由的操作，用户点击不同的选项页面就会变成不同的样子，以前我们笨拙地使用后端的重定向来实现，现在我们可以通过前端vue的路由跳转来实现：用户选项时，切换路由，而路由就会让vue寻找对应的vue组件从而响应给用户。

一、路由定义

  • 狭义的路由概念：在vue3中，路由主要用于管理SPA（单页面应用）的页面跳转，使得不同的url可以映射不同的组件，无需重新加载整个页面。

二、基本示例

1.配置路由器

  • 功能：注册路由，配置映射关系，一个路由对应一个组件。

routers

// 1.导入组件以及路由创建器
import { createRouter, createWebHistory } from "vue-router";
import Home from '../components/RouteTest/Home.vue'
import About from '../components/RouteTest/About.vue'
import News from '../components/RouteTest/News.vue'
// 2.将组件对应响应的路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/news',
            component:News
        },
    ]
})
// 3.将路由器暴露
export default router

2.准备组件

  • 一般来说路由组件通常放在：pages或views的文件夹下。

News.vue

<template>
    <div>
        <p>新闻</p>
    </div>
</template>

<script>
    export default {
        name:'Home'
    }
</script>

About.vue

<template>
    <div>
        <p>关于</p>
    </div>
</template>

<script>
    export default {
        name:'Home'
    }
</script>

Home.vue

<template>
    <div>
        <p>首页</p>
    </div>
</template>

<script>
    export default {
        name:'Home'
    }
</script>

3.装入main.ts

main.ts

import {createApp} from 'vue'
import App from './App.vue'
import router from './routers/index'
// 1.获得app应用
const app = createApp(App)
// 2.将路由装入app
app.use(router)
// 3.挂载app
app.mount('#app')

4.在根组件中定义路由结构

  • 类似于超链接需要定义路由标签，但是我们在vue3中要使用预制好的标签。
  • 然后定义显示区即可。
  • 注意：不需要我们导入组件了，因为我们设置了路由，路由会自动去寻找对应的组件。
  • 注意：通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。可以利用生命周期函数来观察挂载情况。

App.vue

<template>
    <div class="app">
        <h2 class="title">Vue路由测试</h2>
        <div class="navigate">
            <!-- 使用RouterLink标签 to表示跳转的路由 active-class表示路由激活后变成的样式 -->
            <RouterLink to="/home" active-class="active">首页</RouterLink>
            <RouterLink to="/news" active-class="active">新闻</RouterLink>
            <RouterLink to="/about" active-class="active">关于</RouterLink>
        </div>
        <!-- 展示区 -->
        <div class="main-content">
            <!-- 使用RouterView标签表示能够在这块区域展示相应的组件 -->
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { RouterLink,RouterView } from 'vue-router';
</script>

三、路由器的工作模式

  • 路由器的工作模式决定了URL的显示方式和路由跳转行为。
  • 路由器的工作模式分为history模式和hash模式。

history模式：

  • 优点：url更加美观，不带有#。
  • 缺点：需要和后端配合处理路径问题。
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/news',
            component:News
        },
    ]
})

hash模式：

  • 优点：兼容性更好，还有#。
  • 缺点：需要和后端配合处理路径问题。
const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/news',
            component:News
        },
    ]
})

四、to的两种写法

写法1：

// 直接使用字符串
<RouterLink to="/home" active-class="active">首页</RouterLink>

写法2：

// 对象 适用于嵌套路由
<Router-link active-class="active" :to="{path:'/home'}">Home</Router-link>

五、命名路由

  • 简化跳转路由。

命名：

// 1.导入组件以及路由创建器
import { createRouter, createWebHistory } from "vue-router";
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from '../pages/News.vue'
// 2.将组件对应响应的路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
        	name:'jia'
            path:'/home',
            component:Home
        },
        {
        	name:'guanyu'
            path:'/about',
            component:About
        },
        {
        	name:'xinwen'
            path:'/news',
            component:News
        },
    ]
})
// 3.将路由器暴露
export default router

引用：

<template>
    <div class="app">
        <h2 class="title">Vue路由测试</h2>
        <div class="navigate">
            <!-- 使用RouterLink标签 to表示跳转的路由 active-class表示路由激活后变成的样式 -->
            <RouterLink :to="{name:'jia'}" active-class="active">首页</RouterLink>
            <RouterLink to="{name:'xinwen'}"" active-class="active">新闻</RouterLink>
            <RouterLink to="{name:'guanyu'}" active-class="active">关于</RouterLink>
        </div>
        <!-- 展示区 -->
        <div class="main-content">
            <!-- 使用RouterView标签表示能够在这块区域展示相应的组件 -->
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { RouterLink,RouterView } from 'vue-router';
</script>

六、嵌套路由

  • 在路由中又可以嵌套另一个路由，在一个有路由的组件中再设置一层路由，然后就实现了嵌套路由。
  • 使用children标签。有可能有很多嵌套的路由，所以接收的是一个数组，同时我们需要自己定义嵌套的子路由。
  • 注意：嵌套的路由里面不要加反斜杠。
const router = createRouter({
  history:createWebHistory(),
	routes:[
		{
			name:'zhuye',
			path:'/home',
			component:Home
		},
		{
			name:'xinwen',
			path:'/news',
			component:News,
			children:[
				{
					name:'xiang',
					path:'detail',
					component:Detail
				}
			]
		},
		{
			name:'guanyu',
			path:'/about',
			component:About
		}
	]
})
export default router

七、路由传参

  • 有两种方式：query和params。
  • 直接使用编程式导航，记住就行了，再使用事件流的时候就可以直接用，不然结构和事件写在一起非常丑。
  • 现在的关系是News.vue嵌套了Detail.vue。
  • 需求：在一个路由组件接收了用户传过来的参数，然后跳转到嵌套的路由中，嵌套的路由中就可以接收传过来的参数从而作出响应。

1.query

routers

// 1.导入组件以及路由创建器
import { createRouter, createWebHistory } from "vue-router";
import Home from '../components/RouteTest/Home.vue'
import About from '../components/RouteTest/About.vue'
import News from '../components/RouteTest/News.vue'
// 2.将组件对应响应的路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/news',
            component:News,
            children:[
				{
					path:'detail',
					component:Detail,
				}
			]
        },
    ]
})
// 3.将路由器暴露
export default router

News.vue:

// 注意这时候根组件里
// 方式1：直接字符串写法 没啥意义
<Router-link to="/news/detail?a=1&b=2&content=欢迎你">
跳转
</Router-link>
// 方式2：跳转并携带query参数
<Router-link :to="{
	path:'/news/detail',
	query:{
		id:news.id,
		title:news.title,
		content:news.content
	}
}">
{{ news.title }}

Detail.vue

<template>
	<ul>
		<li>{{ id }}</li>
		<li>{{ title }}</li>
		<li>{{ content }}</li>
	</ul>
</template>
<script setup>
import {userRoute} from 'vue-router'
const route = useRoute()
// 通过route.query拿到这个函数然后进行解构
const {id,title,content} = route.query
</script>

2.params

routers

// 1.导入组件以及路由创建器
import { createRouter, createWebHistory } from "vue-router";
import Home from '../components/RouteTest/Home.vue'
import About from '../components/RouteTest/About.vue'
import News from '../components/RouteTest/News.vue'
// 2.将组件对应响应的路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/news',
            component:News,
            children:[
				{
					name:'xiang',
					path:'detail/:id/:title/:content',
					component:Detail,
				}
			]
        },
    ]
})
// 3.将路由器暴露
export default router

News.vue:

// 方法1：字符串的形式
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
// 方法2：对象的形式
<RouterLink 
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

Detail.vue

import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
const {id, title, content} = route.params

3.区别

区别1：query配置路由时不需要占位符。
区别2：params配置路由时要占位符。
区别3：在路由组件里，params只能使用name命名，不能用path。
区别4：params不能穿数组和对象。

八、路由props

  • 刚才我们手动解构了参数，利用params我们可以不用手动解构了。

routers

// 1.导入组件以及路由创建器
import { createRouter, createWebHistory } from "vue-router";
import Home from '../components/RouteTest/Home.vue'
import About from '../components/RouteTest/About.vue'
import News from '../components/RouteTest/News.vue'
// 2.将组件对应响应的路由
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/news',
            component:News,
            children:[
				{
					name:'xiang',
					path:'detail',
					component:Detail,
					props: (route)=>{
						return route.query
					)
				}
			]
        },
    ]
})
// 3.将路由器暴露
export default router

Detail接收参数:

defineProps(['id','title','content'])

九、replace

  • 在需要跳转的RouterLink中的replace标签表示不再可以返回上次的页面跳转，不可以退栈回溯了。
  • 加上push时可以回溯。

News.vue

// 方法1：字符串的形式
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
				
// 方法2：对象的形式
<RouterLink  replace
  :to="{
    name:'xiang', //用name跳转
    params:{
      id:news.id,
      title:news.title,
      content:news.title
    }
  }"
>
  {{news.title}}
</RouterLink>

十、编程式导航

  • 可以写在一个函数里面进行跳转。
  • 也可以用router.replace()。
  • router.push和router.replace
  • route.query和route.params是获取当前路由的参数。
<template>
// 记得点击的时候如果需要传入数据给嵌套的子组件让它显示的话
// 就给它串参数
	<button @click="clickToPush({id:'1', title:'标题', content:'内容'})">点我</button>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
// 对象形式（推荐）
// 定义一个接口
interface INews {
	id:string,
	title:string,
	content:string
}
// 可以写在一个函数里面然后进行定义
// 同时限制类型
function clickToPush(news:INews) {
	router.push({
	  path: '/news/detail',
	  query: {
	  	  id:news.id,
	      title:news.title,
	      content:news.title
	  }
	});
}
</script>

十一、重定向

  • 在需要重定向的路由配置中加上redirect即可。
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/',
 			redirect:'/home',
        }
    ]

总结

  • 路由用来控制组件之间的切换以及跳转，能够在不刷新页面的情况下显示不同的组件。
标签
#vue.js
「Vue3系列」Vue3 路由
日常笔记/总结/系列知识梳理
03-06 1752
路由元信息（Route Meta）允许你在路由配置中定义一些自定义信息，这些信息可以在路由守卫（Navigation Guards）或其他地方使用。Vue Router 提供了许多高级功能，包括路由元信息配置、嵌套路由和动态路由匹配。嵌套路由允许你创建一个多级导航结构，你可以在一个路由内部定义子路由。动态路由匹配允许你定义可变的 URL 部分，用于匹配不同的参数。提供了一些属性来定制链接的行为和外观。事件，并阻止其默认行为（即阻止页面跳转），除非。默认的标签，如果指定了的话）。在 Vue 3 中，
vue3.0在 setup 中访问路由和当前路由
我的博客
02-08 650
因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.
【Vue3 生态】Vue Router 路由知识概览
前端知识分享喵
06-19 4335
在 Web 前端开发中，路由是非常重要的一环，但是路由到底是什么呢？
Vue3——路由
最新发布
吴声子夜歌的博客
05-03 455
随着页面逐步增多，功能不断增强，单纯地利用组件切换页面已经无法满足应用程序的开发、扩展和维护需求。如果通过路由来实现，就可以轻松地解决这一难题。通过路由导航，用户就可以管理应用中不断增多的模块内容，并且可以根据业务的需求，在各个不同的模块之间进行自由切换操作。它就像公交、地铁的控制中心，通过该控制中心，可以将班车发送到不同的目的地，如图所示。学习路由首先需要掌握几个核心概念，主要包括静态路由表、分配地址、统一入口、寻找地址及地址过滤。光听这几个名词，读者可能会有些困惑，或者理解不了路由到底是什么，下面我们就
Vue路由高级用法
bestkasscn的博客
12-22 961
vue-router的高级用法 路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向 const router = createRouter({ history:createWebHashHistory(), routes:[ {path:'/',redirect:'/home'} {path:'/home',component:MyHo
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue3路由基本使用
qq_48763502的博客
09-13 6759
在 Vue 3 中，路由指的是应用程序的导航系统，允许你在不同的视图或页面之间进行切换。通过 vue-router 插件，你可以定义路由规则，将 URL 路径映射到 Vue 组件，实现页面间的跳转和状态管理。使用路由，用户可以在应用中导航不同的视图，同时保持浏览器的历史记录。 2. 创建路由配置 定义路由配置通常在一个单独的文件中完成，例如 router/index.js 或 router/index.ts。配置包括路径、组件和其他路由属性： 3. 在应用中使用路由 在你的 Vue 应用中，通常会在 mai
vue3使用vue-router嵌套路由(多级路由)
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
12-03 1万+
在使用嵌套路由时，建议将路由按照功能模块进行分层，每一层代表一个主要的功能块，每个层级下的路由数量不要过多，一般建议不要超过 10 个，层级也不要超过 5 层。
YDOOK:vue3:vue-cli4: 嵌套路由官方实例 用法详细教程
YDOOK
03-11 263
Python 光速入门 56：占位 - YDOOK
从Vue 2到Vue 3：深入了解路由配置的变化与升级建议
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
07-28 1万+
欢迎阅读本篇文章，我们将带您深入探索Vue 2和Vue 3的路由配置。在现代前端开发中，路由是构建交互式Web应用程序不可或缺的一部分。Vue.js作为一种流行的JavaScript框架，在版本2和版本3之间进行了重大改进和升级。在这篇文章中，我们将比较Vue 2和Vue 3的路由配置，并介绍它们之间的主要区别和新特性。我们将探讨Vue Router的使用方法，包括路由的定义、嵌套路由的设置、路由守卫的应用等。我们还将深入研究Vue 3中的新特性，例如如何影响路由配置的方式。
一篇文章带你学会Vue3的路由使用
qq_56754356的博客
11-05 3785
一片文章带你学会Vue3的路由使用！！！
vue3 配置路由
悟世君子的博客
06-10 1万+
使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4
【Vue3路由】
2301_79400832的博客
05-08 749
在传统的Web应用中，当我们点击一个链接时，浏览器会向服务器发送一个全新的请求，服务器返回一个新的HTML页面。这种模式在用户体验上可能会有延迟感，并且每次页面切换都需要重新加载资源。而单页应用（SPA）的核心思想是，应用在初次加载时只获取一个HTML页面，后续的页面切换和内容更新都通过JavaScript动态地操作DOM来实现，而不需要重新加载整个页面。前端路由就是为了实现这种“无刷新”的页面切换而诞生的。
Vue3 使用路由 Router
“跟他人学，和自己比”
01-02 5225
众所周知，vue 是用来构建单页面应用的前端框架，大于大多数此类型应用来讲，都推荐使用官方支持的 vue Router，在单页面应用，客户端的 JavaScript 可以连接页面跳转请求，动态获取数据，然后无需重新加载页面的情况下，更新当前页面数据，这样可以带来更加丝滑的用户体验，因为这类场景下的用户通常会在很长的一段时间中做出多次交互，路由是更新在客户端执行的。vue Router是 vue 官方路由，他与 vue 核心深度集成，让 vue 构建单页面应用变得更加轻而易举。嵌套路由映射。
vue2路由和vue3路由区别及原理
qq_25416827的博客
10-07 1944
Vue 3 的相较于 Vue 2 更加现代化和灵活，并且对 TypeScript 进行了更好的支持。与此同时，Vue 3 的路由实现基于 Composition API，使其能够更好地与 Vue 3 的设计理念相契合，提升了开发体验和可维护性。
Vue3怎么配置路由？
繁若华尘的博客
02-21 2434
在 Vue3 中，路由管理由 Vue Router 4.x 提供支持。以下是详细配置步骤、常见场景、问题及最佳实践。
Vue3 路由
翱翔-蓝天
12-27 1232
首先，在定义路由时，为每个路由指定一个nameroutes});Vue Router 在 Vue 3 中是实现单页应用的关键。它提供了灵活的路由配置选项、动态路由、嵌套路由以及路由导航守卫等功能，使得开发复杂的页面导航和数据展示变得更加简单和高效。通过合理使用 Vue Router，可以大幅提升 Vue 应用的用户体验和维护性。
【vue3】监听路由变化
热门推荐
坚信万物皆可切的切图仔
12-28 4万+
有时在页面刷新或者返回等操作时，想监听路由变化进行数据更新等操作。那么在vue3中怎么对路由进行监听呢？阿彬提供了这两种方法： onBeforeRouteUpdate路由守卫 import { useRouter,onBeforeRouteUpdate } from 'vue-router'; let router = useRouter() onBeforeRouteUpdate((to) => { // console.log('onBeforeRouteUpdate',to
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值