vue-router中嵌套路由的路径关系

最新推荐文章于 2024-01-08 10:32:01 发布
最新推荐文章于 2024-01-08 10:32:01 发布
阅读量1.2k 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zz2230633069/article/details/109184814
版权

 这是一个嵌套路由，router中的属性name，path，redirect，children，index等都是固定的属性，这上面的name_CN只是一个数组中的临时的名字，实际上并不是路由的path关键字，后面会赋值给path。

子路由的路径拼接再父路由path上面，即使redirect进行路径的重定向。也就是说，重定向并未改变path属性的值，那么子路由的path绝对路径=父路由path+子路由相对路径path

 

一只tobey
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router实现嵌套路由的讲解
01-19
一、嵌套路由（配置好父路由component后，在父路由下面添加children属性来配置这个父路由的子路由） 需要注意的是：父组件中的<router></router>是子组件的占位符是必不可少的 嵌套路由的现象：点击了路由跳转之后父路由组件的内容一直呈现；子路由的内容进行切换，地址栏的路径也随之改变。 // 嵌套路由 { path: '/nest', component: () => import('@/nest/nest'), // 嵌套路由的关键字children，在父路由中添加children数组 中添加子路径 children:[
[Vue]嵌套(多级)路由
emmmm.....
10-22 2431
1. 静态页面 2. 组件的拆分 2.1 目录结构 2.2 组件 3. 嵌套路由的配置
Vue-Router路由path相同警告，不允许导航到相同路由，报错“NavigationDuplicated: Avoided redundant navigation to current loc
Sodaxiang的博客
11-28 1255
Vue-Router路由path相同警告，不允许导航到相同路由，报错"NavigationDuplicated: Avoided redundant navigation to current location: " 报错提示：避免重复路由； 原因：在页面上重复进入了相同的路由； 解决：主要有3种方案，如下（对于repalce方法也同样适用）： 直接在路由跳转的部分加上'.catch(()=>{})'，这可以避免显示错误，因为浏览器认为异常已被处理。 在定义路由时候加上全局捕获.
关于Vue3的嵌套路由
dargon_11的博客
01-02 449
Vue3的嵌套路由
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 4153
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
vue——router的一种操作——不显示父级路由的路径，只需要子级路径。
阿牛哥的博客
11-21 1530
vue——router的一种操作——不显示父级路由的路径，只需要子级路径。
Vue Router 嵌套路由中, 子路由path路径带 ‘/‘ 与不带的区别
weixin_43123984的博客
09-21 1726
定义的路径 path 没有书写。在定义 path 没有书写。在定义 path 有书写。定义 path 前有书写。定义 path 有书写。
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
解决vue-router 嵌套路由没反应的问题
10-14
总结，解决Vue Router嵌套路由无响应的问题，关键在于确保每个嵌套的父路由都有一个对应的组件，并且这个组件模板中包含`<router-view>`标签。理解路由的嵌套结构和`<router-view>`的作用对于正确地使用Vue Router至...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
Vue-router嵌套路由时父路由重复出现的问题
weixin_51173316的博客
08-31 3453
在写嵌套路由时，父路由为hi，子路由为hi2，hi3,修改前在router中是这样写的： export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hi', component: Hi, alias: '/greet', children:
11-04-react路由基础
ange997的博客
10-30 152
路由 简介 react中，使用路由的是react-router react react.js 类似于vue.js web(BS构架的项目） react-navtive 简称RN 开发原生APP （android ios） react-router react-router ：是下面两种的基础，浏览器和原生app的通用部分 react-router-dom：用于浏览器端 react-router-navtive：用于原生app react-router-dom: 一些组件： 组件名必须大写 &l
VUE-路由详解
damadashen的博客
05-14 2579
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
vue3中路由的使用（详细讲解）
最新发布
2301_78646673的博客
01-08 7433
在前端或者vue3项目中路由主要用于构建单页面应用程序（SPA），其中所有的页面都在同一个HTML文件中加载，通过JavaScript动态地切换显示不同的内容。路由器（Router）：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。请着重注意，路由器（Router）与路由（Route）的区别。路由器是用来管理路由的，你也可以理解为路由的集合。如果将一个一个的路由比作学生，那么路由器就是老师，负责管理所有的路由。
【Vue】Router路由无法跳转问题整理
热门推荐
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
vue路由篇
weixin_68658847的博客
03-03 1343
vue路由篇
Vue知识整理，专题之路由：7、路由-使用children属性实现路由嵌套
鲁迷那的专栏—坚持实践后再写出来！
03-30 4160
一、前言 上两篇文章我们介绍了路由的传参：使用query方式传递路由参数、使用params方式传递路由参数，其中两种方式都没问题，大家根据个人习惯使用即可。详细可参见博文： 原创Vue笔记整理，专题之路由：5、路由传参-使用query方式传递路由参数 原创Vue笔记整理，专题之路由：6、路由传参-使用params方式传递路由参数 这篇文章我们将介绍：路由-使用children属性实现路......
构建vue-router知识体系(三)动态路由基本匹配、简易的 router 实现
发果叁
08-29 719
很多时候我们需要将给定匹配模式的路由映射到同一个组件： 例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的 ID 是不同的；在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数；router-link 跳转。...
深入vue-router路由嵌套理解
10-04
在Vue-Router中，我们可以通过嵌套路由来管理复杂的页面结构和页面间的跳转逻辑。 路由嵌套是指在一个路由组件中嵌套其他子路由组件，形成一个父子关系的层级结构。通过路由嵌套，我们可以更好地管理页面的细节和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值