vue的路由嵌套

最新推荐文章于 2024-04-29 23:47:56 发布
最新推荐文章于 2024-04-29 23:47:56 发布
阅读量173 收藏
点赞数
分类专栏： vue框架 文章标签： vue路由嵌套
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39378691/article/details/83753793
版权
1.需要在 Router 的参数中使用 children 配置：

PS：登录成功后跳转到action组件，action组件嵌套了多个子组件，渲染左边的导航栏（fixed）和默认渲染index的内容。相当于只有登录和action两个页面
{
path: ‘/action’, component: action, name: ‘action’,
children: [
{ path: ‘/’, component: index, name: ‘index’ },
{ path: ‘index’, component: index, name: ‘index’}
]
}
在这里插入图片描述

2.登录成功后的效果图如下

在这里插入图片描述

3.路由跳转都是在action/后面

在这里插入图片描述

过敏的小鱼干
关注
专栏目录
Vue——嵌套路由
虽菜但瘾
02-02 236
路由 有关路由的详细信息可以去vue的官网去查看，我这里只是自己实例的一个理解和总结。 单页面程序离不开路由的分配，自始至终只有一个页面存活，因此有关路由跳转的逻辑要合理配置 vue-Router 选择官方使用的vue-router库，因此要先准备环境 安装 $ npm install vue-router 安装之后就要配置路由，但是为了方便维护路由节点，可以创建单独的文件存放路由配置，因此创建router文件夹，添加index.js index.js import Vue from 'vu
Vue路由嵌套详解
qq_41359998的博客
08-19 3213
Vue路由嵌套详解 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。 demo 1.创建用户信息组件，在 views/user 目录下创建一个名为 Profile.vue 的视图组件； <template> <h1>个人信息</h1> </template> <script> export default { name: "UserProfile" } </script> <style scoped&gt
vue嵌套路由
qq_44231797的博客
10-26 3222
文章目录一、为什么要使用嵌套路由？二、步骤演示：1.在views目录下新建user目录，编写User.vue和Profile.vue2.配置路由信息 router/index.js3.编写Main.vue4.编写main.js，导入路由信息三、碰到的问题四、解决方案方案一方案二 一、为什么要使用嵌套路由？ 就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个 <
vue 嵌套路由
weixin_46146313的博客
05-12 301
嵌套路由 一些比较复杂的应用会有多层嵌套的路由和组件组成 在应用增加一个用户个人中心，用户中心又是由多个页面组成时，使用嵌套路由 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import(/* webpackChunkName: "about" */ '../vi
Vue嵌套路由
Mr.Zhang 努力奔跑!
03-12 107
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../vue/dist/vue.js"></...
vue路由嵌套的SPA实现步骤
08-28
以上就是实现Vue路由嵌套的SPA的详细步骤。通过这种方式，我们可以构建层次分明且易于管理的应用，同时提供流畅的用户体验。在实际开发中，还可以结合元信息（meta）、命名视图（named views）和其他高级特性，...
Vue 路由嵌套（children嵌套）
qq_46381044的博客
03-25 5591
嵌套路由就是路由里面嵌套他的子路由，可以有自己的路由导航和路由容器（router-link、router-view） 通过配置children可实现多层嵌套。 app.vue <template> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/main">成功页面</router-link> <router-vie
vue 路由嵌套高亮问题的解决方法
08-27
在这个场景中，我们遇到了一个特定的问题：路由嵌套高亮问题，即在主路由和子路由切换时，对应的导航菜单未能正确地高亮显示，或者在某些情况下导致页面数据空白。以下是如何解决这个问题的详细步骤和解释： 1. **...
Vue 嵌套路由
ChaoChao66666的博客
03-18 288
在上一篇（Vue3 Router（路由）的基本使用_Zhichao_97的博客-CSDN博客）的基础上，希望实现嵌套路由，如下： 1.将vue3Router01>src>index.js改为如下所示： import {createRouter,createWebHashHistory} from 'vue-router' import News from '../components/News.vue' import User from "../components/...
Vue路由嵌套
shizhenweiszw的博客
03-01 617
使用children属性实现路由嵌套 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="./lib/vue-2.4.0.j
vue嵌套子路由
小菜鸟的博客
12-06 352
vue嵌套子路由 今天自己的项目需要使用嵌套子路由，里面出现了几个bug下面记录一下 首先简单讲解下嵌套子路由的使用 我们在需要使用子路由的页面使用router-view,keep-alive的使用方式好像有所改变，自己去查看官网 路由页面index.js 组件跳转子路由 vue.config.js 下面简单说下我遇到的bug 1.你要修改历史路由路径，重新创建个文件vue.config.js，不然你在地址栏输入路径的时候会报错 2.就是你在使用router-link的时候一定要注意 这里一定要注
Vue中的路由嵌套
m0_59345890的博客
09-11 2668
我们还可以做一个优化，在home路由对应的组件加载到页面时，我们需要默认加载一个子路由时，我们需要做一个重定向，在home路由中redirect:"重定向的子路由网址"。路由嵌套，即在当前路由中注册子路由中，形成父子结构，显示子路由对应的组件，需要网址在父路由的pathname下才能实现，后面再具体演示。子路由内也可以注册它的子路由，一直下去就可以形成一个庞大的“家族”。这个时候子路由已经注册好了，子路由的path路径都是在父路由的基础下创建，我们再在对应引入组件的位置创建好组件。
【VUE 嵌套路由】
居然天上楼的博客
12-05 1347
路由配置 / 路由对象：即配置了path和component的对象 当你需要将某个视图显示在App.vue的位置，则将你的路由配置写在router/index.js的routes常量下，作为routes的数组元素即可；当你需要将某个视图显示在其它视图的位置，例如显示在HomeView.vue的位置，则在其它视图的路由配置中添加children属性，并将你的视图的路由配置在此children下即可
Vue路由的嵌套
zsyoung的博客
05-12 143
1. 配置路由 在main.js中或自己指定的路由文件中： { path:'/user', component:User, children:[ {path: 'useradd', component: UserAdd}, {path: 'userlist', component: Userlist} ] } 上面的childre...
Vue中的嵌套路由
故常无，欲以观其妙；常有，欲以观其徼；
04-19 210
<h1>登陆界面</h1></div>''<div><h1>用户界面</h1></div>''<div><h1>员工界面</h1></div>''<div><h1>部门界面</h1></div>''<div><h1>欢迎</h1>
Vue Router 嵌套路由
最新发布
qq_40930841的博客
04-29 1331
父路由路径/子路由路径// router.js文件内容如下：// 导入组件// // 创建路由实例对象// // routes数组用于定义路由匹配规则// ]// })// // 导出路由实例对象//嵌套路由routes: [})// 导出路由实例对象。
Vue前端路由
yh_zeng2的博客
04-12 162
Vue前端路由
Vue嵌套(多级)路由
见证自己学习,成长的记录
02-02 3367
嵌套路由就是在路由里面继续加一个新的路由。也叫多级路由，其实就是套娃在开发中，很少会套到六层路由，一般到达4或5层路由已经达到极限了，明白了路由的规律，不管套多少层都是一样的，下面演示二级路由path : '/home' , component : Home , children : [ //通过children配置子级路由 {path : 'news' , //此处一定不要写：/news component : News } , {
vue 路由嵌套两个
10-20
Vue路由嵌套是指在一个路由下再嵌套一个或多个子路由。这样可以更好地组织和管理项目的路由结构，使得代码更加清晰易懂。在上述引用中，可以看到在Sports.vue组件下设置了三个子组件：SportsHome.vue、SportsCha.vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值