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
关注
专栏目录
Vue Router 嵌套路由中, 子路由path路径带 ‘/‘ 与不带的区别
weixin_43123984的博客
09-21 1786
定义的路径 path 没有书写。在定义 path 没有书写。在定义 path 有书写。定义 path 前有书写。定义 path 有书写。
Vue-Router路由path相同警告，不允许导航到相同路由，报错“NavigationDuplicated: Avoided redundant navigation to current loc
Sodaxiang的博客
11-28 1325
Vue-Router路由path相同警告，不允许导航到相同路由，报错"NavigationDuplicated: Avoided redundant navigation to current location: " 报错提示：避免重复路由； 原因：在页面上重复进入了相同的路由； 解决：主要有3种方案，如下（对于repalce方法也同样适用）： 直接在路由跳转的部分加上'.catch(()=>{})'，这可以避免显示错误，因为浏览器认为异常已被处理。 在定义路由时候加上全局捕获.
关于Vue3的嵌套路由
dargon_11的博客
01-02 492
Vue3的嵌套路由
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 4351
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
嵌套（父子）路由
zanxin0331的专栏
08-15 1220
在main.js中定义路由路径: 注意：子路由中 path中没有'/'。 然后在要用的界面中引用： 此处用的是左右布局：想在哪里引用子路由就在哪里写<router-view>. ...
vue——router的一种操作——不显示父级路由的路径，只需要子级路径。
阿牛哥的博客
11-21 1583
vue——router的一种操作——不显示父级路由的路径，只需要子级路径。
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
vue-router实现嵌套路由的讲解
01-19
一、嵌套路由（配置好父路由component后，在父路由下面添加children属性来配置这个父路由的子路由） 需要注意的是：父组件中的... // 嵌套路由的关键字children，在父路由中添加children数组 中添加子路径 children:
解决vue-router 嵌套路由没反应的问题
10-14
总结，解决Vue Router嵌套路由无响应的问题，关键在于确保每个嵌套的父路由都有一个对应的组件，并且这个组件模板中包含`<router-view>`标签。理解路由的嵌套结构和`<router-view>`的作用对于正确地使用Vue Router至...
Vue-router嵌套路由时父路由重复出现的问题
weixin_51173316的博客
08-31 3606
在写嵌套路由时，父路由为hi，子路由为hi2，hi3,修改前在router中是这样写的： export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hi', component: Hi, alias: '/greet', children:
vue3.0 + vue-router4.0打包发布后内容路径错误以及页面空白
tabooblood的博客
01-17 623
重装系统以及启动新项目，启用了vue3.0+router4.0，结果遇到的坑，留备份，以防自己忘记 解决路径错误 vue.config.js中设置publicPath: './' 解决空白 history改变为hash路径 在配置路由的router.js里面，把createWebHistory改成createWebHashHistory ...
11-04-react路由基础
ange997的博客
10-30 158
路由 简介 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 2912
介绍VUE路由及使用，简单介绍动态路由、嵌套路由、编程式的路由及命名路由的使用
vue3中路由的使用（详细讲解）
最新发布
2301_78646673的博客
01-08 8880
在前端或者vue3项目中路由主要用于构建单页面应用程序（SPA），其中所有的页面都在同一个HTML文件中加载，通过JavaScript动态地切换显示不同的内容。路由器（Router）：路由器是负责管理路由的组件或模块。它定义了路由的规则、路径和对应的处理函数或组件。请着重注意，路由器（Router）与路由（Route）的区别。路由器是用来管理路由的，你也可以理解为路由的集合。如果将一个一个的路由比作学生，那么路由器就是老师，负责管理所有的路由。
【Vue】Router路由无法跳转问题整理
热门推荐
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
vue路由篇
weixin_68658847的博客
03-03 1385
vue路由篇
Vue知识整理，专题之路由：7、路由-使用children属性实现路由嵌套
鲁迷那的专栏—坚持实践后再写出来！
03-30 4241
一、前言 上两篇文章我们介绍了路由的传参：使用query方式传递路由参数、使用params方式传递路由参数，其中两种方式都没问题，大家根据个人习惯使用即可。详细可参见博文： 原创Vue笔记整理，专题之路由：5、路由传参-使用query方式传递路由参数 原创Vue笔记整理，专题之路由：6、路由传参-使用params方式传递路由参数 这篇文章我们将介绍：路由-使用children属性实现路......
深入vue-router路由嵌套理解
10-04
Vue-Router是Vue.js官方提供的路由管理插件，可以实现单页面应用（SPA）中的路由切换。在Vue-Router中，我们可以通过嵌套路由来管理复杂的页面结构和页面间的跳转逻辑。 路由嵌套是指在一个路由组件中嵌套其他子路由组件，形成一个父子关系的层级结构。通过路由嵌套，我们可以更好地管理页面的细节和逻辑。 在Vue-Router中，我们首先需要定义路由的层级结构。我们可以在路由配置中使用`children`属性来定义嵌套路由。例如： ```js const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'about', component: About }, { path: 'contact', component: Contact } ] } ] }); ``` 在上面的代码中，我们定义了一个名为`home`的父路由，它有两个子路由`about`和`contact`。当用户访问`/home/about`时，会渲染`About`组件，而当用户访问`/home/contact`时，会渲染`Contact`组件。 在嵌套路由中，父路由的组件中需要使用`<router-view>`标签来显示子路由对应的组件。在上面的例子中，我们需要在`Home`组件中添加`<router-view>`标签。 ```html <template> <div> <h1>Home</h1> <router-view></router-view> </div> </template> ``` 当用户访问`/home`时，会渲染`Home`组件，并且`<router-view>`标签中会显示子路由对应的组件。 通过嵌套路由，我们可以更好地管理页面的结构和逻辑，将页面分成多个模块，并且可以在子路由中访问父路由的数据和方法。我们可以在路由跳转时传递参数，通过使用`$route.params`来获取参数。 总结来说，Vue-Router的路由嵌套可以实现复杂的页面结构和页面间的跳转逻辑，通过定义父子关系的路由层级结构，使用`<router-view>`标签来显示子组件，并且可以通过路由传递参数来实现页面间的数据共享。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值