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

最新推荐文章于 2022-08-01 16:10:26 发布
最新推荐文章于 2022-08-01 16:10:26 发布
阅读量190 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jimson_zhu/article/details/102717010
版权
Vue.js 专栏收录该内容
33 篇文章 3 订阅 ¥99.90 ¥299.90
订阅专栏
本文详细介绍了Vue.js中嵌套路由的使用，通过实例展示了如何在home页面下创建/home/news和/home/message两个子路由，阐述了嵌套路由的配置步骤，包括定义子组件、设置children关键字映射关系、在父组件中使用嵌套路由，并提醒注意完整路径的重要性，以及如何配置默认路径。
摘要由CSDN通过智能技术生成

嵌套路由

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

实现步骤演示：

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

了解本专栏 订阅专栏 解锁全文
jimson_zhu
关注
专栏目录
订阅专栏
Vue使用日记（23）：vue-router详解（4）——路由懒加载
jimson_zhu的博客
10-24 297
路由懒加载 首先，我们知道路由中通常会定义很多不同的页面； 这些页面最后被打包在哪里呢? 一般情况下，是放在一个js文件（指app.3252jshdfsdjfskdf……js，下面会说）中； 但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大； 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。 为了避免这种情况，就可...
VueJs路由跳转——vue-router的使用详解
10-20
【VueJs路由跳转——vue-router的使用详解】 Vue.js是一个流行的前端JavaScript框架，用于构建用户界面，尤其适合单页应用程序。为了管理页面间的跳转和状态，Vue.js引入了vue-router作为官方的路由库。vue-router...
网站如何在pc端和手机端切换显示两套不同的代码
daddykei的博客
08-21 1930
App.vue <template> <div class="box"> <router-view v-if="showPage == 1" name="m"></router-view> <router-view v-else="showPage == 2" name="pc"></router-view> </div> </template> <script> exp..
vue 多个路由路由跳转created不执行
weixin_41380972的博客
08-29 5191
问题 今天做项目的时候发现，vue页面路由跳转的时候，created函数不执行。 created() { }, 解决办法 使用watch函数监听路由即可。 watch:{ '$route'(to,from){ } }, 响应路由参数的变化 提醒一下，...
为什么在vue中使用嵌套路由没用
hejiaying68的博客
10-08 1168
1、检查在router目录下的index文件中是否配置了 path:'XXX'，component:XXX, children:[ {path:'BBB', component: BBB} ] 如果采用如上写法，那么如果你要同时访问XXX和BBB的话，需要访问到路由地址：/XXX/BBB 如果你想通过访问/XXX就能查看到XXX下嵌套BBB的页面，那么就需要把BBB的path改为‘’ ...
24.Vue路由管理器：Router（进阶篇）
高新园养鸡场
09-12 231
导航守卫 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。其实，导航守卫就是路由跳转过程中的一些钩子函数，再直白点路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。 研究导航守卫，先做一个demo看看各种守卫的触发时机： //main.js //全局导航守卫 router.beforeEach((to, from,
Vue.js路由组件vue-router使用方法详解
10-20
5. **创建router实例**: 使用VueRouter构造函数，传入上面定义好的路由配置，创建router实例。这个实例包含了应用中所有路由的规则。 6. **挂载router**: 创建Vue的根实例时，需要传入router配置参数。这一步是必须...
详解Vue-Router源码分析路由实现原理
11-28
9. **嵌套路由(Nested Routes)**：Vue-Router支持嵌套路由，即在一个路由组件内部定义子路由，这样可以构建复杂的路由结构。 通过以上分析，我们可以看到Vue-Router在Vue应用中起着至关重要的作用，它不仅提供了...
vue-router 路由基础的详解
08-29
4. **创建路由器实例**：使用 `VueRouter` 构造函数创建实例，并传入路由配置。 ```javascript const router = new VueRouter({ routes // （缩写）相当于 routes: routes }); ``` 5. **创建 Vue 实例**：最后，...
详解vue 路由跳转四种方式 (带参数)
Leon_940002463的博客
10-23 6318
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 7767
安装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使用日记（22）：vue-router详解（3）——动态路由
jimson_zhu的博客
10-23 285
动态路由 有时候一个path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb； 除了有前面的/user之外，后面还跟上了用户的ID； 这种path和component的匹配关系，我们称之为动态路由（也是路由传递数据（参数）的一种方式）。 配置和使用步骤： 第一步，首先创建组件，没有组件怎么跳转： 第二步，在配置文件in...
Vue使用日记（21）：vue-router详解（2）——push、replace路由跳转和切换
jimson_zhu的博客
10-22 1641
之前使用router-link的to属性进行路由跳转，现在使用另一种方式进行跳转：使用代码的方式进行跳转。 vue-router源码内部定义了一个对象：$router，其实就是一开始使用vue-router时创建的路由实例对象，这个对象在任意一个组件内都可以使用，所以可以调用它的push和replace方法进行路由跳转： 说明：push和replace分别对应之前history模式的p...
Vue使用日记（7）：组件的data数据存放
jimson_zhu的博客
07-16 1250
组件是一个单独功能模块的封装：这个模块有属于自己的HTML模板，也应该有属于自己的data数据。 组件中的数据保存在哪？组件的data能不能保存在Vue实例上呢？ 经过测试，在组件中不能直接访问Vue实例中的data。 即便能访问，如果将所有的数据都放在Vue实例中，Vue实例会变得非常臃肿。 <div id="app"> <my-cpn></my-...
Vite+Vue3创建项目案例
jimson_zhu的博客
08-01 1046
Vite+Vue项目创建。
Vue使用日记（31）：项目构建或重构步骤详解
jimson_zhu的博客
12-16 772
新项目需要构建或旧项目需要重构时，一般都需要经过几个大的步骤。 新项目构建 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使用日记（5）：Vue组件化理解（一）
jimson_zhu的博客
07-15 741
Vue组件化开发 组件化是Vue.js中的重要思想，任何应用都可以拆分成一个个组件进行管理和复用，如果将整个应用比喻成一棵树，那么这个应用会自上而下被拆分成独立的模块，形成一棵“组件树”。 注册组件的基本步骤： 1）创建组件构造器：调用Vue.extends()创建组件构造器； 2）注册组件：调用Vue.component()注册组件； 3）使用组件：在Vue实例作...
Vue使用日记（14）：el和template的关系
jimson_zhu的博客
10-18 717
实例在之后的开发过程中可以管理#app中的内容。模板在之后的开发中，我并不希望手动地去频繁修改，是否可以做到呢？如果我们后面自定义了组件，也必须修改index.html。模板中的内容进行抽离，分成三部分书写：template。这样做的好处是，我们就不需要在以后的开发中再次操作。这里使用的是ES6的模板字符串语法。中的数据显示在界面中，就必须修改。到目前为止，我们开发的项目都是。模板的内容会替换掉挂载的对应。内容删掉，只保留一个基本的。的内容，应该怎么处理呢？在之前的博客中，我们知道。中写入对应的标签即可。
Vue使用日记（28）：Promise详解
jimson_zhu的博客
12-03 547
ES6中一个非常重要和好用的特性就是Promise，但是初次接触Promise会一脸懵逼，What the hell is this？看看官方或者一些文章对它的介绍和用法，也是一头雾水。 Promise到底是做什么的呢？Promise是异步编程的一种解决方案。 那什么时候我们会碰到处理异步编程、异步事件的情况呢？ 一种很常见的场景应该就是网络请求了。 我们封装一个网络请求的函数，因为不能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jimson_zhu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值