vue 路由嵌套 及 router-view vue-router --》children
vue 路由嵌套 vue-router --》children
在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据,之前我都是通过v-show/v-if来实现,但当切换的组件太多时,上述方法显然不太合理,而在实际开发中,当你切换的组件太多时,后端往往会将你切换组件的路由给你,所以在这说一下关于vue-router中children,来解决此问题。
例如:在routerChildren.vue中有两个按钮,点击按钮1跳转的one页面 ,点击按钮2跳转的two页面 ,但是需要保存这两个按钮(如果直接通过this.$router.push(),按钮将会消失,会完全跳转)
1.首先我们需要配置一下路由 ,在router.js中

import RouterChildren from "./views/routerChildren.vue"
import RouterChildrenOne from "./views/children/one.vue"
import RouterChildrenTwo from "./views/children/two.vue" {
path: "/routerChildren",
name: "routerChildren",
component: RouterChildren,
children: [
{
path: '/', //代表 /routerChildren
name: "routerChildren",
redirect:'/routerChildren/one' //当我们访问存在子路由的页面时,重定向为第一个子路由,切记,如果写了component,那么这个component也将显示
},
{
path: '/routerChildren/one',
component: RouterChildrenOne,
},
{
path: '/routerChildren/two',
component: RouterChildrenTwo,
}
]
}

2.在rouertChildren.vue组件中,我们写一下简单的样式及跳转

<template>
<div>
<h1>
<p @click="handleOne">子路由1</p>
<p @click="handleTwo">子路由2</p>
</h1>
<router-view></router-view>
</div> </template>
<script>
export default {
methods: {
handleOne() {
this.$router.push('/routerChildren/one')
},
handleTwo() {
this.$router.push('/routerChildren/two')
}
}
}
</script>
<style scoped>
h1 {
display: flex;
justify-content: center;
}
p {
margin: 20px;
cursor: pointer;
}
</style>

在这里我们一定要注意需要在这个组件中带上 <router-view></router-view>这个标签
否则,你切换的one组件和two组件里面的内容不会显示,
谈下个人对<router-view/>这玩意儿的理解:
我感觉这个东西就是一个当前组件的容器,与当前组件相关联的组件想要显示,就需要通过他,也就是说一层路径对应一个<router-view/>,每一个与组件相匹配的路由都会在<router-view/>中显示
我们的项目中所有组件都关联在app这个组件上,如何进行切换显示的呢,就是通过这个东西<router-view/>,
所以说如果app下面有个One组件,但是在One组件里想要通过跳转来显示OneOne及OneTwo组件,你就必须在One组件里写一个<router-view/>。
ok,结束!!
vue 路由嵌套 及 router-view vue-router --》children的更多相关文章
- Vue路由嵌套
Vue路由嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue路由中 Navigating to current location ("/router") is not allowed
报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...
- vue教程3-06 vue路由嵌套(多层路由),路由其他信息
多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue 路由嵌套高亮问题
正常路由嵌套是没有问题的,但是如果你已经在当前主路由页面了,然后再次点击主路由就会出现页面数据空白的情况 看代码: //主路由通过v-for循环出来 <div class="list- ...
- Vue路由嵌套和命名视图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue路由--嵌套路由
静态嵌套路由: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 关于vue路由嵌套遇到的坑~
关键在于子路由中的path问题,path之前不要放/ <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue路由嵌套,vue動態路由
https://www.cnblogs.com/null11/p/7486735.html https://www.cnblogs.com/goloving/p/9271501.html https: ...
- vue路由嵌套,对应展示的视图
随机推荐
- 安装运行redis
在Linux系统上安装Redis 环境准备 Redis是C语言开发,建议在Linux上运行,本人系统centos-6.5. 安装redis需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没有g ...
- P4513 最大连续字段和 (线段树+区间合并)
题目链接:https://www.luogu.org/problem/P4513 题目大意:单点修改和求区间最大连续字段和 解题思路:很容易想到是用线段树来做,但是如何进行维护呢? 每个维护区间 [L ...
- 特殊字符(包括emoji)梳理和UTF8编码解码原理(转)
转自:https://www.jianshu.com/p/57c27d67a8a8 背景知识 emoji表情符号,是20世纪90年代由NTT Docomo栗田穣崇(Shigetaka Kurit)创建 ...
- GUI学习之二十二——QRubberBand学习总结
今天学习一种全新的输入控件——QRubberBand()控件(橡皮筋选中) 一.描述 QRubberBand()提供了一个矩形或西安来只是选择或边界的效果(就像在桌面上点击鼠标后拖拽拉出来的框一样), ...
- bzoj4238 & loj2881 电压 二分图判定+dfs树
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4238 https://loj.ac/problem/2881 题解 如果想要让每一条边都有电流 ...
- oracle删除数据文件
在我们详细介绍之前,我们必须说清楚一点:Oracle不提供如删除表.视图一样删除数据文件的方法,数据文件是表空间的一部分,所以不能“移走”表空间. 一.使用offline数据文件的方法 非归档模式使用 ...
- LOJ6358 前夕
上来4的倍数又要交集恰好 单位根反演+二项式反演定了( 具体推柿子放下面了qwq $g(n) = \sum_{i=n}^N f(i) \binom{i}{n} \\g(n) = \binom{N}{n ...
- eclipse安装心得和环境变量配置的体会
从昨天开始就开始安装eclipse,一开始觉得安装eclipse很简单,肯定就跟下个游戏差不多,但是打开官网之后发现下载的安装包不能用,经过搜索之后发现是因为下载源不对.改过下载源之后下载的安装包竟然 ...
- 用PL/SQL登录显示 “无法解析指定标识符”
错误现象: 为了看表空间是否完整建好,打开相应的连接工具plsql,但是打不开,显示 “无法解析指定标识符”: 处理方式: 首先点击取消直接登录,打开工具---->首选项,在路径上看指定好没有 ...
- import Vue form 'vue' 解释