vue路由与子路由嵌套的使用（配合源码观看）

最新推荐文章于 2024-07-26 13:19:15 发布
最新推荐文章于 2024-07-26 13:19:15 发布
阅读量1.1k 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44497296/article/details/107664206
版权
本文详细介绍了如何在Vue项目中设置和使用路由与子路由，包括在router.js中添加新路由，创建views文件夹及组件，实现路由跳转和子路由渲染。在views文件夹中定义父路由，在components中创建子路由组件，并在router.js中配置相应路径，最终实现父子路由间的交互。
摘要由CSDN通过智能技术生成

要想加新的点击页面并且绑定路由需要以下步骤
1.在router.js里加入新路由，普通路由需要在path中加‘/’如下图。
在这里插入图片描述

2.在views里创建新的文件夹，文件夹里的vue文件名字为index.vue时可在路由中省略vue文件的文件名 （views里放的是Head里的大路由文件，一会的components里放的是子路由们的文件）
在这里插入图片描述
3.还要再router.js中引入此文件，如下图
在这里插入图片描述
4.在views里的文件里写这个组件的内容即可，记得写

<router-link class="dongtai" to="/xxx1/xxx2">
             xxxxxxxxx
最低0.47元/天 解锁文章
做个前端工程师吧
关注
专栏目录
子路由嵌套_Golang Gin 实战（七）| 分组路由源代码分析
weixin_35890852的博客
12-27 285
在我们开发定义路由的时候，可能会遇到很多部分重复的路由：/admin/users/admin/manager/admin/photo以上等等，这些路由最前面的部分/admin/是相同的，如果我们一个个写也没问题，但是不免会觉得琐碎、重复，无用劳动，那么有没有一种更好的办法来解决呢？Gin为我们提供的解决方案就是分组路由分组路由类似以上示例，就是分好组的路由，分组的原因有很多，比如基于模块...
Vue中的路由嵌套
m0_59345890的博客
09-11 2668
我们还可以做一个优化，在home路由对应的组件加载到页面时，我们需要默认加载一个子路由时，我们需要做一个重定向，在home路由中redirect:"重定向的子路由网址"。路由嵌套，即在当前路由中注册子路由中，形成父子结构，显示子路由对应的组件，需要网址在父路由的pathname下才能实现，后面再具体演示。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了，子路由的path路径都是在父路由的基础下创建，我们再在对应引入组件的位置创建好组件。
Vue路由（+嵌套路由）入门源码.zip
06-22
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。 Vue.js 路由需要载入 vue-router 库。
【转发】【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
最新发布
近日终于有时间好好回顾下一些作品了，有帮助的好好看就行
07-26 60
综上就是vue中的路由vue-router和vue-cli的全部使用教程，感兴趣的朋友可以试试幺，掌握vue你也可以。文章属于转载的：文章链接是：https://blog.csdn.net/littlefun591/article/details/136927838。
Vue 父路由和子路由
weixin_42914989的博客
03-01 3513
Vue 父路由和子路由 以黑马项目二leyou商城的前端界面为例 我们在访问localhost:9001时候首先会进入index.html和读取main.js main.js里面包含了new Vue（{}）,我们看一下里面参数：router。 router是路由，负责把数据渲染#app的元素上的< template> 寻着线索我们再来打开router.js文件 首先看到的是下图的routes routes是一个路由数组，里面可以设置需要映射的路径。 父路由 访问localhost:9001/
Vue三层嵌套路由的示例代码
08-27
本篇文章主要介绍了Vue三层嵌套路由的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue多层嵌套路由实例分析
10-17
主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
修改vue源码实现动态路由缓存的方法
10-15
本文探讨了通过修改Vue源码来实现动态路由缓存的方法，重点分析了动态路由的原理、keep-alive的使用以及组件生命周期的管理。了解这些知识点对于深入掌握Vue框架和开发单页面应用(SPA)非常有帮助。 首先，动态路由...
详解Vue-Router源码分析路由实现原理
11-28
9. **嵌套路由(Nested Routes)**：Vue-Router支持嵌套路由，即在一个路由组件内部定义子路由，这样可以构建复杂的路由结构。 通过以上分析，我们可以看到Vue-Router在Vue应用中起着至关重要的作用，它不仅提供了...
vue-路由精讲 二级路由和三级路由的作用
10-14
主要介绍了vue-路由精讲 二级路由和三级路由的作用，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
通过vue快速搭建，创建子路由
wangzhen12138的博客
07-30 1791
继续上文中我们完成了一个由pageone和pagetwo的路由搭建 具体的上文请打开https://blog.csdn.net/wangzhen12138/article/details/119250222查看 如图上所示那么我们将在页面二中创造出三个子页面，方法如下 首先在我们vuecli文件中的views文件中创建ChildOne.vue\ChildTwo.vue\ChildThree.vue三个文件 最好用我们的驼峰命名法 代码如下所示 如下是我们的childone代码段 ...
Vue路由分模块 与 子路由嵌套,
技术前端，忠于热爱 @0.活在风浪里
01-07 1508
路由模块化 创建文件路径如下： 路由模块化思路 /** * * 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { // XXX } * 导出多个路由模块要加[]，例如export default [{},{}], * 在router.js引入，写在路由里，需要...引入的名字 * */ 1、新建文件后 内容如下方 新建的sort.js文件 /** * 多个分模块路由。 */ export default [{ // 如果多.
vue子路由使用方法
m0_52364694的博客
07-02 1147
1.在某一子组件中添加进入子路由 2.在有子路由的组件路由配置中添加children字段，children是一个数组，成员是对象。对象格式{path:’’,component:组件对象名}(children中的path是不带’/'的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 4万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue中路由嵌套（子路由）
PILIpilipala的博客
12-02 1万+
路由的嵌套就是点击一个路由地址后，继续点击，进入到另外一个路由地址下，即第二个路由就是第一个路由的子路由。 根据我们前面学习的VueRouter的知识，可以直接写出代码来实现： 一般写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
Vue实现嵌套路由
越努力越幸运的博客
10-11 6391
Vue实现嵌套路由 嵌套路由又称为子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路景观也按某种结构对应嵌套的各层组件，例如我们看Vue的官网教程。 当我们点击左边的项目的时候，我们知道，他左边和上面两个导航栏是不会改变的。改变的只是右边那一块区域。将鼠标放在某个标签上面，我们可以看到，他就是一个路由。或者我们应该说，他就是一个子路由。接下来，我们就说一下怎么实现这个子路由功能。 我们先去ElemetUI里面选一个吧。我选的是下面 它对应的代码如下：我们将它写到我们的Mai
Vue -- 路由嵌套
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-22 599
1. Vue--路由嵌套 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。 搭建环境同上（只是把Login组件删除了） 1.1 新建Profile子组件（个人信息） Profile.Vue <template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style
Vue-Router源码深度解析：路由实现机制
这样，Vue组件可以通过`this.$router`访问路由对象，进行导航操作，同时`<router-view>`可以在组件树中任何位置使用，方便地实现组件的嵌套路由。 Vue-Router的导航守卫是另一个重要的特性，它允许在路由切换前进行...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

做个前端工程师吧

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

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

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

打赏作者

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

抵扣说明：

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

余额充值