vue3子路由嵌套

最新推荐文章于 2024-05-31 16:08:57 发布
最新推荐文章于 2024-05-31 16:08:57 发布
阅读量2.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52921550/article/details/118519488
版权

vue子路由嵌套，嵌套多重子路由
首先要使用子路由嵌套就要在route文件中要添加子路由的页面添加一个参数
在这里插入图片描述
children中的格式为数组，这里面参数就是我们今天要说的子路由
然后在页面中写下route-link标签，route-link标签中有一个为to的参数，这个参数里面的name值就是要显示的子页面
在这里插入图片描述
当然只写一个route-link标签是不够的，它如何显示到页面呢，显示到什么位置呢这个时候就要用到router-view这个标签了
在这里插入图片描述
这个标签中定义的就是点击中的子路由中的内容了，当然这个标签只要不放在最大div的外面，一般情况下都会显示的

钟阜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue router路由嵌套不显示问题的解决方法
12-10
综上所述，当你遇到Vue Router的路由嵌套不显示问题时，应首先检查子组件是否包含`<router-view>`标签，然后检查路由配置是否正确，包括路径前缀、子路由嵌套和组件实例化。同时，不要忽视导航守卫的影响，以及路由...
基于Vue Cli和嵌套路由技术
11-06
// 子路由 { path: 'child1', component: () => import('@/views/ChildView1.vue') }, { path: 'child2', component: () => import('@/views/ChildView2.vue') } ] } ] }) ``` 在这个例子中，`/parent`是一个...
vue3中使用路由及子路由配置
Renners的博客
07-27 8469
如A页面下有组件B，B组件中也需要有路由跳转，则直接在B组件中放入，然后在一级路由下添加children项路由即可，注children中默认项path需写为空。在main.js中引入./router/index.js。
vue路由3：子路由
duansamve的博客
05-13 1443
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <di...
Vue3-路由详解
最新发布
A的博客
05-31 1556
让路由组件更方便的收到参数（可以将路由参数作为。优点：兼容性更好，因为不需要服务器端处理路径。作用：可以简化路由跳转及传参（后面就讲）。参数时，需要提前在规则中占位。的对象写法，必须使用。
Vue路由高级用法
bestkasscn的博客
12-22 750
vue-router的高级用法 路由重定向 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向 const router = createRouter({ history:createWebHashHistory(), routes:[ {path:'/',redirect:'/home'} {path:'/home',component:MyHo
vue3+router 命名路由-编程式导航
qq_52099965的博客
10-23 534
vue3+router 命名路由-编程式导航
Vue 3 中，子路由的配置
HWL5679的博客
04-12 499
import { createRouter, createWebHistory } from 'vue-router';
浅谈vue 二级路由嵌套和二级路由高亮问题
11-19
每个子路由配置同样包含`path`和`component`，分别表示子路由的路径和对应的组件。以下是一个简单的例子： ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/...
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
08-28
这个问题是由 vue router 的 history 模式和嵌套路由的组合所导致的。 二、问题分析 ---------------- 在分析这个问题之前，让我们先了解一下 vue router 的 history 模式和嵌套路由是如何工作的。在 vue router ...
Web前端框架应用：第5章 Vue路由-嵌套路由.pptx
06-07
第5章 Vue路由 初识路由 ...每一个子路由里面可以嵌套多个组件，子组件又有路由导航和路由容器。 父路由的地址/要去的子路由"> 5.5 嵌套路由 什么是嵌套路由 当使用children属性实现子路由时，子路由的
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 5631
Vue-Router路由，编程式导航，动态路由，路由导航守卫
vue3 - 36.router.6 - 嵌套路由
qq_34111842的博客
11-14 415
1.嵌套路由可以通过children的方式来声明，children接收的是一个数组，数组中可以定义无限个子路由。比如手机端，底部有四个或者五个子路由页面，当我们点击底部路由的时候，页面进行切换。或者我们常见的后台管理系统，左侧为导航，右侧为导航对应的页面内容。我们可以把底部跳转封装成一个路由子组件并且引用，css布局样式略。我们再单独新建一个承载整个项目的总路由，比如mian.vue。
子路由里嵌套子路由、嵌套多重子路由
qq_35859392的博客
02-14 2976
子路由里嵌套子路由、嵌套多重子路由 子路由嵌套子路由 第一级子路由 Main.vue &lt;template&gt; &lt;div style="border:1px solid #333;padding:20px 50px;margin:20px 0px;"&gt; 这是一级路由 &lt;router-vie...
vue3在父路由下动态新增子路由（新增需要打开新标签页）
weixin_42494979的博客
12-07 1925
描述： 我的路由是通过后台查询菜单表返回，前端新增需要以新标签的方式打开新增内容。我们不可能在数据库添加新增按钮的菜单，所以需要前端动态在父路由下新增子路由 效果： 图1 图2 代码： api：addRoute(parentName: string, route: RouteConfig): () => void 参数：父路由实例名称、新增路由对象 说明：SaleManagement是我父组件实例名称 //新增 const handleAdd = () => { router
vue3 路由多层嵌套 keepalive 不生效
偷喝汽水的博客
06-11 3900
vue3 路由多层嵌套 keepalive 不生效
vue router 嵌套路由（子路由）的使用
m0_61486963的博客
06-29 6085
vue router 嵌套路由
vue3动态添加路由
小绵杨
06-17 4997
有的时候我们需要根据不同的用户身份生成不同的路由规则，例如：初始化vite + vue + ts项目，引入vue-router。 目录结构如下，注意这个404重定向，vue3不支持直接使用“*”匹配所有路由了，要使用。 初始化路由： 现在如果去访问vip路由，则会跳转到404页面。 如果需要访问vip页面，那么就需要我们动态地添加vip路由，下面代码实现了添加： 此时我们再去访问vip路由路径： 可以成功访问了。可以了解到，动态添加路由就是使用了router对象的addRoute方法。有时候可能是添加嵌套
vue3子页面创建及使用
m0_64590669的博客
03-02 3376
子页面创建及使用
vue嵌套路由，子路由条不进去
06-06
3. 子路由的组件路径错误：请检查子路由的组件路径是否正确，确保组件的路径是相对于根目录的。 4. 子路由的组件没有正确导出：请确保子路由中的组件已经正确导出，可以使用 `export default` 导出组件。 希望以上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值