Vue3 路由, Vue router （Part2）

news/2025/3/26 19:55:37/文章来源:https://www.cnblogs.com/emanlee/p/18010380

Vue 路由 Vue router

 

 path: name: component: redirect: children: meta:

 

在Web开发中，特别是在使用Vue.js这类现代前端框架时，经常会涉及到路由和组件的组织方式。你提到的路径（path）、名称（name）、组件（component）、重定向（redirect）、子路由（children）和元信息（meta）是Vue Router中路由配置的关键部分。下面我将分别解释这些属性：

1. path

path属性定义了路由的路径。这是用户在浏览器地址栏中输入的URL的一部分，用于匹配对应的路由。例如：

{ path: '/about', component: About }

2. name

name属性为路由定义一个名称，这样可以在编程式导航时通过名称引用路由，而不是通过路径。例如：

{ path: '/about', name: 'About', component: About }

3. component

component属性指定了当路由匹配成功时应该渲染的组件。例如：

{ path: '/about', component: About }

这里About是一个Vue组件。

4. redirect

redirect属性用于定义一个重定向规则。当用户访问某个路由时，会自动重定向到另一个路由。例如：

{ path: '/old-path', redirect: '/new-path' }

或者更复杂的重定向：

{ path: '/old-path', redirect: to => { return '/new-path/' + to.params.userId } }

5. children

children属性用于定义嵌套路由。这对于构建具有多级结构的应用程序非常有用。例如：

{
path: '/user',
component: User,
children: [
{ path: 'profile', component: UserProfile },
{ path: 'posts', component: UserPosts }
]
}

这里UserProfile和UserPosts组件将作为/user/profile和/user/posts的子路由被渲染。

6. meta

meta字段允许你定义一个对象，用于存储额外的信息，这些信息可以在路由守卫或全局导航守卫中访问，用于权限控制或其他自定义逻辑。例如：

{
path: '/admin',
component: AdminPanel,
meta: { requiresAuth: true, role: 'admin' }
}

在路由守卫中，你可以检查这些元信息来决定是否允许访问：

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!authCheck()) { // authCheck是检查用户是否认证的函数
next({ path: '/login' });
} else {
next();
}
} else {
next(); // 确保一定要调用 next()
}
});

通过这些配置，Vue Router 提供了一种灵活而强大的方式来管理前端路由和组件的映射关系。

 

path: "/",name: 'Layout',component: () => import('@/components/MenuLayout'),redirect: "/welcome",children: [{path: 'welcome',component: () => import('@/pages/Welcome'),meta: { requireAuth: true, userType: REGULAR_USER }},{path: 'help',component: () => import('@/pages/Help'),meta: { requireAuth: true, userType: REGULAR_USER }}]

 

 

==================================================

Vue Router的使用

1.安装 npm install vue-router -s
2.在src目录下创建router目录，接着创建index.js文件
3.在index.js文件中引入Vue以及路由 import VueRouter from ‘vue-router’
4.挂载路由 Vue.use(VueRouter)
5.创建路由对象并配置路由规则 const router = new VueRouter({routes: [{ path: ‘/home’, component: Home }]})
6.将路由对象传递给路由实例，在main.js文件路由实例中添加router
7.在app.vue中预留路由出口

index.js文件

// 引入依赖
import Vue from "vue";
import VueRouter from "vue-router"
import Home from "../components/Home.vue"
// 挂载
Vue.use(VueRouter)
// 创建实例并配置
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home }]
});// 导出
export default router

main.js文件

new Vue({// 让 vue 知道我们的路由规则
  router,render: h => h(App),
}).$mount('#app')

app.vue文件

<div id="app"><router-view></router-view>
</div>

注意：vue-router版本选择
链接：https://blog.csdn.net/xh888zw/article/details/124468921

=========================================

路由中有三个基本的概念 route, routes, router。

1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

2， routes  是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3， router  是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4，客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。

 

在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。

<router-link> 就是定义页面中点击的部分，

<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。

所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link to="/home">Home</router-link>

 

https://blog.csdn.net/qq_42268364/article/details/100021721

=========================================

视频介绍 router-view ：

https://www.bilibili.com/video/BV1pE411L75D/

=========================================

 

this.$router.push()两种常见用法

 

1、路由传值   this.$router.push()

（1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL

（2）当点击 <router-link> 时，这个方法会在内部调用，即点击 <router-link :to="..."> 等同于调用 router.push(...)

　　a)      声明式：<router-link :to="...">

　　b)      编程式：router.push(...)

　　c)      该方法的参数可以是一个字符串路径，或者一个描述地址的对象。　　

 

// 字符串
router.push('home')// 对象
this.$router.push({path: '/login?url=' + this.$route.path});// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});// 设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage}).then(({data: {code, content}}) => {if (code === 0) {// 对象this.$router.push({path: '/home'});}else if(code === 10){// 带查询参数，变成/login?stage=stagethis.$router.push({path: '/login', query:{stage: stage}});}
});// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

 

2、获取参数的两种常用方法：params和query

（1）由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

及通过路由配置的name属性访问

this.$router.push({name:"menuLink",params:{alert:"页面跳转成功"}})

（2）在目标页面通过this.$route.params获取参数：

<p>提示：{{this.$route.params.alert}}</p>

（3）在目标页面通过this.$route.query 获取参数

//传值
this.$router.push({path:"/menLink",query:{alert:"页面跳转成功"}})//用query获取值
<p>提示：{{this.$route.query.alert}}</p>

 

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用

 

https://blog.csdn.net/qq_42552857/article/details/118678031

=========================================

https://blog.csdn.net/xh888zw/article/details/124468921

https://blog.csdn.net/weixin_47124112/article/details/126730114

https://zhuanlan.zhihu.com/p/204946145

 

======================================

Vue Router的嵌套路由



说明
        本文介绍Vue Router的嵌套路由的用法。
        嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套。（router-view必须要有，否则点击了router-link后，路径会变化，但页面不改变）。

使用场景
        嵌套路由用于实现页中页效果。例如：
    用户页面中，有登录页面和注册页面，这两个页面通过标签切换。
        此时：用户页面是父路由，登录和注册页面是子路由
    后台管理页面中，布局都是同一套，只是中间的内容部分改变。（例如：vue-element-admin）
        此时：整个布局是父路由，中间的内容页面是子路由。

官网网址
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
示例
需求：写一个用户页面，里边有登录页面和注册页面，这两个页面通过标签切换。
路由配置
router/index.js

    import Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',redirect: User},{path: '/user',name: 'User',component: User,children: [{path: 'login',name: 'Login',component: Login},{path: 'register',name: 'Register',component: Register}]}]const router = new VueRouter({routes})export default router

 
用户页面（父页面）
User.vue

    <template><div class="outer"><h2>这是用户页面</h2><router-link :to="{name: 'Login'}">登录</router-link> |<router-link :to="{name: 'Register'}">注册</router-link><router-view></router-view></div></template><script>export default {name: 'User'}</script><style scoped>.outer {margin: 20px;border: 2px solid red;padding: 20px;}</style>

 
登录页面（子页面）
Login.vue 

   <template><div class="outer"><h3>这是登录页面</h3></div></template><script>export default {name: 'Login'}</script><style scoped>.outer {margin: 20px;border: 2px solid blue;padding: 20px;}</style>

 
注册页面（子页面）
Register.vue 

   <template><div class="outer"><h3>这是注册页面</h3></div></template><script>export default {name: 'Register'}</script><style scoped>.outer {margin: 20px;border: 2px solid blue;padding: 20px;}</style>

 
测试

访问：http://192.168.0.104:8080/

结果：

 
点击“登录”/“注册”：

子路由的path前加“/”

        如果子路由的path的最前边有“/”，则不需要加父路由的路径即可访问此子组件。

例如，修改上边的“路由配置”，将path: 'login'，改为path: '/login'，则登录页面可以这样访问：

http://192.168.0.104:8080/#/login

示例

router/index.js：
 

   import Vue from 'vue'import VueRouter from 'vue-router'import User from '../views/user/User'import Login from '../views/user/Login'import Register from '../views/user/Register'Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',redirect: User},{path: '/user',name: 'User',component: User,children: [{path: '/login',name: 'Login',component: Login},{path: 'register',name: 'Register',component: Register}]}]const router = new VueRouter({routes})export default router

 
测试

 
 链接：https://blog.csdn.net/feiying0canglang/article/details/126196561

======================================

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/905272.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

浏览器 + AI 插件

浏览器 + AI 插件

浏览器添加 AI 插件，就是给浏览器安装振翅高飞的翅膀。前情概要 我是浏览器的重度使用者，每天的工作几乎都可以在浏览器端完成，所以对浏览器很依赖。碰到浏览器插件，自然都要高看一眼，因为她们可以增强浏览器的功能，昨天看到聚合网站今日热榜中的栏目 “小众软件” 介绍 …
阅读更多...
Contest3924 - 计科23级算法设计与分析平时作业-03

Contest3924 - 计科23级算法设计与分析平时作业-03

题目链接 A.Knight Moves 题面思路 马的bfs、最短路径问题。模板题 示例代码 #include<bits/stdc++.h>using namespace std;#define ll long long //#define int ll #define pii pair<int, int> #define all(x) x.begin(),x.end() #define fer(i, m, n) for(int i …
阅读更多...
UML之包含用例

UML之包含用例

UML提供include机制避免用例重复，实现共享。本文介绍创建被包含用例的步骤，并通过实例展示其在基础用例共享、复杂用例分解及继承用例复用等场景下的应用。对于规模较大的用例，建模过程中经常会发现多个用例存在共享相同的子目标或子行为的情况。为避免重复并实现共享，UML提…
阅读更多...
基于ESP32的物联网传感器和超声波距离传感器，Watmonitor可进行实时水位监测

基于ESP32的物联网传感器和超声波距离传感器，Watmonitor可进行实时水位监测

Watmonitor是一个使用物联网传感器进行实时水位监测的自托管应用程序，具有多语言支持和易于访问的数据。Watmonitor是一个多功能的、自托管的web应用程序，专为实时水位监测而设计。使用基于ESP32的物联网传感器和超声波距离传感器，它可以跟踪各种环境中的水位，如水井，水箱…
阅读更多...
【Java】【SpringBoot】Quartz——动态任务调度

【Java】【SpringBoot】Quartz——动态任务调度

回顾：前面学习了quartz的基础使用：https://www.cnblogs.com/luyj00436/p/18781141 定时任务可能是按照预设的时间进行。可是实际中，我们肯定希望自由的进行任务生成、暂停、恢复、删除、更新等操作。 Quartz本身没有提供动态调度的功能，需要自己根据相关的API开发。 场景订…
阅读更多...
GrapeCity Documents V8.0 新版本特性

GrapeCity Documents V8.0 新版本特性

GcExcel V8.0 新版本特性丰富，包括：数据导入方面，可从多种数据源（如自定义对象、DataTable 等）导入，为 IRange.ImportData (..) 新增重载；假设分析上，通过 IWorksheet.Scenarios 接口支持 “方案” 功能，可进行多种操作且受保护工作表也能编辑；数据透视表能绑定表格数…
阅读更多...
如何寻找替代FTP传输文件的软件，解决文件传输难题？

如何寻找替代FTP传输文件的软件，解决文件传输难题？

FTP因其操作简单、客户端种类多、价格低廉（甚至免费）等优势，受到众多企业的青睐，在全世界范围内得到广泛的应用。但它也面临着一些安全和效率方面的挑战，因此企业都在寻找可平滑替代FTP传输文件的软件。有以下局限性： 1.安全性弱：明文传输，漏洞频发，容易遭到DOS攻击；…
阅读更多...
20244205 《Python程序设计》实验一报告

20244205 《Python程序设计》实验一报告

课程：《Python程序设计》 班级： 2442 姓名： 高赫 学号：20244205 实验教师：王志强 实验日期：2025年3月24日 必修/选修： 公选课 1.实验内容 (1).熟悉Python开发环境； (2).练习Python运行、调试技能； (3).编写程序，练习变量和类型、字符串、对象、缩进和注释等； (4).编…
阅读更多...
微积分的本质——导数.18790288

微积分的本质——导数.18790288

本篇为3b1b系列【微积分的本质】笔记 原视频：02-导数的悖论 | 03-用几何来求导 | 04-直观理解链式法则和乘积法则定义导数 这是一个随着时间变化，车辆行驶距离的坐标图在横轴的任何一个点\(t\)上，如果你去查看车的车速表，上面都有一个数字表示当前的车速，但这是如何计算的…
阅读更多...
推荐8款 .NET 开源、免费、实用的 Windows 效率软件

推荐8款 .NET 开源、免费、实用的 Windows 效率软件

前言 今天大姚给大家推荐8款基于 .NET 开源、免费、实用的 Windows 效率软件，开发工作提升利器，希望可以帮助到有需要的小伙伴。 DevToys DevToys是一个专门为开发者设计的Windows工具箱，完全支持离线运行，无需使用许多不真实的网站来处理你的数据，常用功能有：格式化（支…
阅读更多...
C语言转义字符

C语言转义字符

阅读更多...
解密prompt系列51. R1实验的一些细节讨论

解密prompt系列51. R1实验的一些细节讨论

DeepSeek R1出来后业界都在争相复现R1的效果，这一章我们介绍两个复现项目SimpleRL和LogicRL，还有研究模型推理能力的Cognitive Behaviour，项目在复现R1的同时还针对R1训练策略中的几个关键点进行了讨论和消融实验，包括DeepSeek R1出来后业界都在争相复现R1的效果，这一章我…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023