Vue使用日记（24）：vue-router详解（5）——嵌套路由

最新推荐文章于 2024-04-22 09:24:00 发布
最新推荐文章于 2024-04-22 09:24:00 发布
阅读量173 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jimson_zhu/article/details/102717010
版权

嵌套路由

嵌套路由是一个很常见的功能，比如在home页面中，我们希望通过/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。也就是在大页面home下面嵌套/home/news和/home/message这两个路由，组件切换是在home这个大页面进行。

实现步骤演示：

1、首先定义两个子组件，用于进行嵌套：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
jimson_zhu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
24.Vue路由管理器：Router（进阶篇）
高新园养鸡场
09-12 211
导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。其实，导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。 研究导航守卫，先做一个demo看看各种守卫的触发时机： //main.js //全局导航守卫 router.beforeEach((to, from,
为什么在vue中使用嵌套路由没用
hejiaying68的博客
10-08 1125
1、检查在router目录下的index文件中是否配置了 path:'XXX'，component:XXX, children:[ {path:'BBB', component: BBB} ] 如果采用如上写法，那么如果你要同时访问XXX和BBB的话，需要访问到路由地址：/XXX/BBB 如果你想通过访问/XXX就能查看到XXX下嵌套BBB的页面，那么就需要把BBB的path改为‘’ ...
详解vue 路由跳转四种方式 (带参数)
Leon_940002463的博客
10-23 6263
1. router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 <...
Vue 在VueCLI4中使用路由（仅适用于Vue2.x）
mengxianglong123的博客
11-08 7741
安装vue-router npm install vue-router 新建一个router文件夹创建一个js文件 index.js // 配置路由相关的信息 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from ...
vue 多个路由路由跳转created不执行
weixin_41380972的博客
08-29 5126
问题 今天做项目的时候发现，vue页面路由跳转的时候，created函数不执行。 created() { }, 解决办法 使用watch函数监听路由即可。 watch:{ '$route'(to,from){ } }, 响应路由参数的变化 提醒一下，...
vue-router学习4：嵌套路由
最新发布
qq_40358970的博客
04-22 298
在路由配置文件中，你需要为父路由指定 children 属性，它是一个包含子路由定义的数组。子路由的 path 不需要以斜杠 / 开头，因为它们会被视为相对于父路由的路径。首先，你需要为嵌套路由创建对应的子组件。这些组件将在父路由组件的 中被渲染。一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构。在父路由组件的模板中，你需要使用。来指定子路由组件的渲染位置。组件）来导航到嵌套路由。
详解vue-router传参的两种方式
01-19
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js ...
详解vue路由篇(动态路由、路由嵌套)
12-08
当引入vue-router后，我们需要处理的是将组件(components)映射到路由(routes)，然后在需要的地方进行使用渲染。 一、基础路由 1、创建vue项目，执行vue init webpack projectName命令，默认安装vue-router。项目创
vue router学习之动态路由和嵌套路由详解
08-29
本篇文章主要介绍了vue router 动态路由和嵌套路由，详细的介绍了动态路由和嵌套路由的使用方法，有兴趣的可以了解一下
详解vue嵌套路由-query传递参数
12-29
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数，传递参数有两种方法，通过 query 或者 params index.html <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router></router> ...
Vue使用日记（22）：vue-router详解（3）——动态路由
jimson_zhu的博客
10-23 268
动态路由 有时候一个path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb； 除了有前面的/user之外，后面还跟上了用户的ID； 这种path和component的匹配关系，我们称之为动态路由（也是路由传递数据（参数）的一种方式）。 配置和使用步骤： 第一步，首先创建组件，没有组件怎么跳转： 第二步，在配置文件in...
Vue使用日记（23）：vue-router详解（4）——路由懒加载
jimson_zhu的博客
10-24 278
路由懒加载 首先，我们知道路由中通常会定义很多不同的页面； 这些页面最后被打包在哪里呢? 一般情况下，是放在一个js文件（指app.3252jshdfsdjfskdf……js，下面会说）中； 但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大； 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。 为了避免这种情况，就可...
Vue使用日记（21）：vue-router详解（2）——push、replace路由跳转和切换
jimson_zhu的博客
10-22 1590
之前使用router-link的to属性进行路由跳转，现在使用另一种方式进行跳转：使用代码的方式进行跳转。 vue-router源码内部定义了一个对象：$router，其实就是一开始使用vue-router时创建的路由实例对象，这个对象在任意一个组件内都可以使用，所以可以调用它的push和replace方法进行路由跳转： 说明：push和replace分别对应之前history模式的p...
Vue使用日记（7）：组件的data数据存放
jimson_zhu的博客
07-16 1195
组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属于自己的data数据。 组件中的数据保存在哪？组件的data能不能保存在Vue实例上呢？ 经过测试，在组件中不能直接访问Vue实例中的data。 即便能访问，如果将所有的数据都放在Vue实例中，Vue实例会变得非常臃肿。 <div id="app"> <my-cpn></my-...
Vite+Vue3创建项目案例
jimson_zhu的博客
08-01 912
Vite+Vue项目创建。
Vue使用日记（5）：Vue组件化理解（一）
jimson_zhu的博客
07-15 723
Vue组件化开发 组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。 注册组件的基本步骤： 1）创建组件构造器：调用Vue.extends()创建组件构造器； 2）注册组件：调用Vue.component()注册组件； 3）使用组件：在Vue实例作...
Vue使用日记（14）：el和template的关系
jimson_zhu的博客
10-18 695
实例在之后的开发过程中可以管理#app中的内容。模板在之后的开发中，我并不希望手动地去频繁修改，是否可以做到呢？如果我们后面自定义了组件，也必须修改index.html。模板中的内容进行抽离，分成三部分书写：template。这样做的好处是，我们就不需要在以后的开发中再次操作。这里使用的是ES6的模板字符串语法。中的数据显示在界面中，就必须修改。到目前为止，我们开发的项目都是。模板的内容会替换掉挂载的对应。内容删掉，只保留一个基本的。的内容，应该怎么处理呢？在之前的博客中，我们知道。中写入对应的标签即可。
Vue使用日记（31）：项目构建或重构步骤详解
jimson_zhu的博客
12-16 686
新项目需要构建或旧项目需要重构时，一般都需要经过几个大的步骤。 新项目构建 1、安装node.js 2、安装nvm 3、管理npm版本 4、配置npm镜像cnpm 5、全局安装Vue 6、开发工具创建项目目录 7、安装vue-cli 8、创建项目 9、安装axios、vue-router、vuex 10、目录结构划分 11、封装网络请求js 12、项目代码编辑 13、项...
vue-router嵌套路由
09-01
在组件中使用嵌套路由时，需要在父级组件中使用 `<router-view>` 标签来渲染子路由的内容。 ```html <h1>Home <router-view></router-view> ``` 在父级组件的模板中，通过使用 `<router-view>` 标签，子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值