Vue 路由的使用及嵌套的子路由

news/2024/7/24 11:34:39 标签: vue路由

目的:vue项目开发时用到子路由的嵌套

1.一开始使用:
<component v-bind:is="content"></component>

解决子组件的 切换的。通过改变content的赋值来实现加载子组件。

2. 但是当路径发生变化是比如多了子路由1中的组件就不能 满足使用了。

3.比如:#/Home/ Children

其中#/Home为 主路由页面,#/Home/ Children为子路由页面。

4.代码表示:

<div>

   <router-view>  

主内容

       <router-view>  

子内容

      <router-view/>

 </router-view>

</div>

5.路由控制

this.$router.push('/Home')主内容页面跳转到/Home页面中,this.$router.push('/Home/Children')主内容 


不变 子内容 切换组件。

6.总结:这样一来我们的 页面就可以想切换那里就切换那里。

官方 文档:https://router.vuejs.org/zh/guide/essentials/navigation.html


http://www.niftyadmin.cn/n/515664.html

相关文章

关于web调用摄像头和进行反扫二维码等到信息

目的&#xff1a;实现web在浏览器中得到二维码&#xff08;外部信息&#xff09; 过程&#xff1a;1. 调用摄像头2.拍照3.解析二维码数据4.返回到网页中 总结&#xff1a;使用了别人的开源解析二维码&#xff0c;具体实现方法还没搞懂 步骤1&#xff1a;实现摄像头调用 <…

关于web网页Js请求头的设置

目的&#xff1a;完成在vue项目里的请求头设置&#xff0c;并在webapi中获取头&#xff0c;然后执行一定的操作&#xff08;vue.net webapi)。 结果&#xff1a;顺利完成&#xff0c;web请求头缺乏全面的l了解&#xff0c;真正的企业项目中都会对请求的拦截处理。 步骤&#…

#父与子的编程之旅#第十二章

第12章主要介绍列表和字典。列表很好理解&#xff0c;和C语言里面的数组差不多&#xff0c;字典是python里面的新知识&#xff0c;重点关注。 列表什么是列表&#xff1f;列表可以说是一个方括号括起来的大集合。如&#xff1a;可以是字符串的集合&#xff0c;family [Mom,Dad…

EF生成数据库(使用控制台命令)

转载&#xff1a;https://blog.csdn.net/killcwd/article/details/52023226 1.先设置好实体类 2.创建一个继承DbContext的上下文类 3. Context类&#xff08;类名和下的方法同名&#xff09;&#xff1a; public Context() : base("namexxxxxx&quo…

2周《机电传动控制》学习笔记

一、阅读电机发展简史 ①电机发展简史资料中&#xff0c;一开始便提及了“法拉第发现了载流导体在磁场中的受力情况”。这是一个很经典的故事&#xff0c;我在高中学法拉第电磁感应定律时就听说过。但我有一点疑问&#xff0c;法拉第在做实验的时候就有了电吗&#xff1f;电不是…

关于阿里图标引用

https://blog.csdn.net/qq_36742720/article/details/83472288 此博客有详细介绍。

ACM/ICPC 之 最长公共子序列计数及其回溯算法(51Nod-1006(最长公共子序列))

这道题被51Nod定为基础题&#xff08;这要求有点高啊&#xff09;&#xff0c;我感觉应该可以算作一级或者二级题目&#xff0c;主要原因不是动态规划的状态转移方程的问题&#xff0c;而是需要理解最后的回溯算法。 题目大意&#xff1a;找到两个字符串中最长的子序列&#xf…

iview Table组件动态渲染filters数组

目的&#xff1a;使用iview Table件中的筛选功能 结果&#xff1a;找了很多网上的方法多不完善&#xff0c;或者的己想要的方法&#xff0c;于是自己方法。 步骤&#xff1a; 1. export default { data () { abc:[{label:"2222",value:"55555"},{l…