07-2-嵌套路由(上)

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量127 收藏
点赞数
分类专栏： Vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41197830/article/details/118979266
版权

我们先来看非嵌套路由会发生什么

 

点击后变成

原因

 跳转的路由跟 首页路由同级(与文件位置同级一个道理)

它就会找到 div app下的出口

我们可以在div app下弄点内容让效果更明显

 

 

 

所以引出 children属性 嵌套路由 

请链接 07-2-嵌套路由(下)

 

Y__C__X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue-router 嵌套路由没反应的问题
10-14
主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
react-router v6.0嵌套路由
小怪獸丶的糖的专栏
12-20 3750
效果图 App.js import React, { Component } from "react"; import { Route, Routes,Navigate } from "react-router-dom"; import Home from "./pages/Home"; //home是路由组件 import About from "./pages/About"; //about是路由组件 import Header from "./components/Header"; //header
七、【React-Router5】嵌套路由
天行健，君子以自强不息
11-29 813
七、【React-Router5】嵌套路由
react-router-dom 嵌套路由
些许就好丶的博客
09-24 3937
项目中，经常会出现几个页面共用一个组件的情况,而且几个页面的流程是一致的，为了方便页面的管理和后期的维护性，我们需要使用页面嵌套页面的这种形式去开发。 这里用react-router-dom来实现： 首先引入需要用到的组件 import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; 然后定义好我们的嵌套路由： [{ path: "/father", component: Fathe
react-router-dom v6版本 嵌套路由
jzh1359314792的博客
08-25 1151
React嵌套路由的v6与v5的区别
vue-router4之嵌套路由
youhebuke225的博客
06-26 765
例子 目录 index.js AboutChildA.vue AboutChildB.vue About.vue 效果
react-router-dom 嵌套路由的实现
10-15
主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
AngularJS使用ui-route实现多层嵌套路由的示例|angluo-javascript-217259.pdf
10-18
主要介绍了AngularJS使用ui-route实现多层嵌套路由的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-router实现嵌套路由的讲解
01-19
一、嵌套路由（配置好父路由component后，在父路由下面添加children属性来配置这个父路由的子路由） 需要注意的是：父组件中的<router></router>是子组件的占位符是必不可少的 嵌套路由的现象：点击了路由跳转之后父...
05-vue-2-插槽的作用域
编程语言基础知识
07-20 4913
个人理解:插槽的子传父 区别于使用自定义事件子传父 插槽传值是通过 在标签上定义属性 而自定义事件 发送事件函数及数据是定义在js中 个人觉得 插槽形式适用于预览数,不进行本地保存 而自定事件有 发送$emit 和父组件中自定义的接收函数 此时就便于将接收到的数据保存到父实例中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl.
05-vue-1-组件插槽
编程语言基础知识
07-20 626
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title </title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- 正常情况下,组件标签内是不能插入.
04-vue-3-子组件之间的传值(空Vue实例中枢)
编程语言基础知识
07-17 433
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> #app div { line-height: 100px; .
06-vue-2-组件的ref属性
编程语言基础知识
07-20 259
总结:这种形式也能进行传值 或者说是主动拿值 更为便捷 人性化 进行遍历会发现 遍历了6个 都以数组的形式展现 而上面两个同名的demo1只在refs中存在后面那个demo1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js">&.
07-1-路由的基本配置
编程语言基础知识
07-21 141
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> <script src="../js/vue-router.js"></script> </head> .
04-vue-2自定义组件传值(子传父)
编程语言基础知识
07-17 138
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> #app { border: 1px solid black; .
04-vue-1父子组件通信-父传子(props)
编程语言基础知识
07-16 126
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <style> #app { border: 1px solid black; .
06-vue-1-组件的生命周期
编程语言基础知识
07-20 80
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> {{num}} <!-- 这里有个小.
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 627
步骤很详细，直接上教程……
react-router-dom v6 路由嵌套
07-28
- *2* [React Router v6 路由配置，嵌套路由](https://blog.csdn.net/Snow_GX/article/details/123656412)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值