vue-router嵌套路由的使用

最新推荐文章于 2023-07-22 16:30:03 发布
最新推荐文章于 2023-07-22 16:30:03 发布
阅读量165 收藏
点赞数
分类专栏： 凌晨3:40的Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44824148/article/details/113355593
版权

嵌套路由

嵌套路由是一个很常见的功能

  • 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容
  • 一个路径映射一个组件,访问这两个路径也会分别渲染两个组件.

路径和组件的关系如下：

在这里插入图片描述

实现嵌套路由有两个步骤

  • 创建对应的子组件, 并且在路由映射中配置对应的子路由
  • 在组件内部使用<router-view>标签

嵌套路由实现

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

嵌套默认路径

在这里插入图片描述

莫余
关注
专栏目录
vue-router：嵌套路由的使用方法
01-21
我们已经学习过了Vue模板的另外定义形式，使用<template></template>。 <!-- 模板抽离出来 --> 首页 新闻 然后js里定义路由组件的时候： // 1. 定义（路由）组件。 const Home = { template: ...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
浅谈VueRouter 嵌套路由
Mu_Soul的博客
01-07 946
VueRouter 嵌套路由的一些想法
vue教程(五)--路由router与嵌套路由用法
qq_35702591的博客
07-26 371
一、html页面中如何使用 1、引入 vue-router.js 2、安装插件 Vue.use(VueRouter) 3、创建路由对象 　　var router = new VueRouter({ 　　　　// 4、配置路由 　　　　routes:[{ 　　　　　　path:'/login', 　　　　　　component:Login //跳转到Login组件,所以先创建Lo...
Vue-Router(一) 嵌套路由
疯林
09-21 2551
Vue-Router(一) 嵌套路由利用vue开发单页面应用有多么快捷这里就不多说了，应用界面通常由多层嵌套的组件组合而成，本文就说一下 Vue-Router 中的嵌套路由。 首先利用 vue-cli 构建一个 vue 项目（这里默认大家都已经安装了 nodeJs） 1. 安装vue-cli npm install -g vue-cli 2. 初始化vue项目 vue init
addRoute（）动态添加路由。
weixin_52310583的博客
07-22 2991
登录页面，点击登录，向后端接口发送api请求。后端根据用户名不同，返回不一样的菜单列表，触发mutation中的方法，设置路由，存储到本地localstorage中。再触发addMenu动态添加路由，component: () => import('@/views/User.vue')//路由按需加载。component: () => import('@/views/User.vue')//路由按需加载。meta: { title: '用户管理' },meta: { title: '用户管理' },
解决vue-router 嵌套路由没反应的问题
10-14
总结，解决Vue Router嵌套路由无响应的问题，关键在于确保每个嵌套的父路由都有一个对应的组件，并且这个组件模板中包含`<router-view>`标签。理解路由的嵌套结构和`<router-view>`的作用对于正确地使用Vue Router至...
基于vue-router 多级路由redirect 重定向的问题
10-18
此外，由于嵌套路由的特性，有时重定向会在不正确的层级进行，从而导致页面重定向到了错误的路由。 **知识点四：解决重定向问题的方法** 针对文章中提到的在点击底部导航项时，三级页面未能正确加载的问题，解决...
uniapp中的一个完全相似Vue-router的路由插件
01-20
【uni-app中的路由管理：uni-simple-router】 uni-app 是一个基于 Vue.js 的多端开发...在实际开发中，还可以利用 uni-simple-router 提供的其他功能，如动态路由、嵌套路由、命名视图等，进一步优化应用的路由管理。
Vue-Router(4) 学习之动态路由 addRoute
Raywh的博客
05-15 9401
前端动态路由：前端动态路由是指根据用户的操作或应用的状态变化，在前端代码中动态加载和渲染不同的页面内容，而无需刷新整个页面。这种方式可以提供更流畅和交互性强的用户体验。Vue Router 是 Vue.js 的官方路由库，用于实现前端的路由功能。通过配置路由表，可以定义路由路径和组件之间的映射关系，实现动态加载和切换不同的页面组件。addRoute 方法：在 Vue Router 中，addRoute 方法用于动态添加路由。你可以根据需要在运行时根据权限或其他条件动态地添加路由配置。
router的 addRoute用法
hj_1520的博客
02-09 1499
router的addRoute使用
vue2进阶篇：vue-router之路由的params参数
刘大猫
07-09 7950
vue2进阶篇：vue-router之路由的params参数
vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由
热门推荐
阿牛哥的博客
09-22 1万+
vue动态路由添加，vue-router的addRoute方法实现权限控制
【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
MAXLZ的博客
06-07 4718
【vue-router源码】系列文章将带你从0开始了解的具体实现。该篇文章将分析router.addRoute的实现。
vue router 嵌套路由（子路由）的使用
m0_61486963的博客
06-29 6186
vue router 嵌套路由
vue-router： 嵌套路由
cssshua的博客
03-06 485
模板抽离我们已经学习过了Vue模板的另外定义形式，使用&lt;template&gt;&lt;/template&gt;。 &lt;!-- 模板抽离出来 --&gt; &lt;template id="home"&gt; &lt;div&gt;首页&lt;/div&gt; &lt;/template&gt; &lt;tem
Vue-router 子路由（嵌套路由）
liubangbo的专栏
06-30 4275
转自：Vue-router 子路由（嵌套路由）_Sun-yz的博客-CSDN博客_vue子路由在应用界面开发中通常由多层嵌套的组件组合而成。但随着页面的增多，如果把所有的页面都塞到一个 routes 数组里面会显得很乱，你无法确定哪些页面存在关系。借助 vue-router 提供了嵌套路由的功能，让我们能把相关联的页面组织在一起。 实验目的 在我们的商城项目中，后台管理页 Admin 涉及到很多操作页面，比如：/admin 主页面 /admin/create 创建新信息 /admin/edit 编辑信息 让
vue路由添加.html,Vue Router中router.addRoute添加子路由的用法
weixin_34850061的博客
06-25 2063
新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由、子路由在添加子路由的时候比如原现有路由const routes = [{path: '/',name: 'Login',component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue')},...
vue-router嵌套路由
最新发布
09-01
嵌套路由是指在一个路由的组件中使用另一个路由。 在 Vue Router 中，可以通过在路由配置文件中定义嵌套路由。嵌套路由的配置是以树形结构来组织的，父级路由将会嵌套渲染其子路由的组件。 下面是一个示例的路由...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

莫余

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

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

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

打赏作者

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

抵扣说明：

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

余额充值