Vue 子路由 与 单页面多路由 的区别
本文地址:http://www.cnblogs.com/veinyin/p/7911292.html
最近学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂。
果然,基础课程的坑新手是体会不到的。
由于子路由仅嵌套了一层,多路由给了左右两个组件,而且两个都是在默认组件下进行的。于是,妥妥误会俩作用一样。我发现自己问题,并尝试网上找到区别时,发现并没有人写出来。只好去官网看了一下文档。
哇塞,真是一语惊醒梦中人啊!!!

上面就是官网对子路由的解释,人家说的很清楚了,嵌套路由!!!是一层层嵌套的!!!
再看看传说中的多路由是啥

嗯,也不叫多路由,而是叫命名视图,上面写着要 “ 同时展示多个视图,而不是嵌套展示 ” ,瞬间醍醐灌顶有没有,区别一下子讲的清清楚楚明明白白,传说的多路由就是放多个平级的视图进行展示,而子路由则是嵌套路由,是一层层嵌套展示的。
不懂还是要看文档,别上网到处查,文档写的还是比较清楚的
END~~~≥ω≤
Vue 子路由 与 单页面多路由 的区别的更多相关文章
- vue-router(配置子路由--单页面多路由区域操作)
1.配置子路由: import Post from "@components/Post" export default new Router({ routers:[ { path: ...
- 使用react-router实现单页面应用路由
这是Webpack+React系列配置过程记录的第二篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- nignx部署Vue单页面刷新路由404问题解决
官网说明: https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E8%AD%A6%E5%91%8A 在linux下搭建ngi ...
- Angular——单页面与路由的使用
单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...
- vue环境搭建及单页面标签切换实例
复习 """ 1.指令: v-once: <p v-once>{{ msg }}</p> v-cloak: 防止页面加载抖动 v-show:绑定的 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- 移动H5页面微信支付踩坑之旅(微信支付、单页面路由模拟、按钮加锁、轮询等常见功能)
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
随机推荐
- Nodejs学习笔记(一)--- 操作Mysql数据库
对于一门语言的学习,我个人觉得最好的方式就是通过一个项目来展示,所以从基本的一些模块去了解是最好的方式对于Mysql怎么去链接数据库这个我是在网上找到的(其实一直想找官方文档的,发现没有它的踪迹,(后 ...
- 《DWZ笔记一》<select>动态联动菜单
联动菜单,即组合框Combo box,在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name ...
- 结对项目——fault,error,failure的程序设计
一.结对编程内容: 1.不能触发Fault. 2.触发Fault,但是不触发Error. 3.触发Error,但不触发Failure. 二.结对编程人员 1.周宗耀.周浩: 2.结对截图: 三.结对项 ...
- 【Linux 命令】- tar 命令
语法 tar [-ABcdgGhiklmMoOpPrRsStuUvwWxzZ][-b <区块数目>][-C <目的目录>][-f <备份文件>][-F <Sc ...
- Spring异步事件
1.发布事件 @Data public class CustomEvent extends ApplicationEvent implements Serializable { private Boo ...
- Problem D - Non-boring sequences——Contest1004 - National Day Training Contest -- Day3
今天比赛的时候做的一个坑题.深坑啊. 题目意思是给你一个有n个数的数字序列.要你判断对于这个序列是都满足任意一个子序列都至少含有一个只出现一次的数字. 看完题目后没什么思路,一直以为要用线段树,每次删 ...
- 精通android学习笔记(一)---广播
普通广播:sendBroadcast 有序广播:sendOrderedBroadcast,有序广播优先级可以再manifest中设置,数值越大,最先收到.-1000~1000 <receiver ...
- Linux进入单用户模式(passwd root修改密码)
进入单用户模式——passwd root修改密码 1.在grub 页面输入a,进入修改内核模式 2.在内核的结尾“/”,输入空格,在输入single,回车 3.启动系统,进入单用户模式 4.Passw ...
- 【开发工具IDE】解决IntelliJ IDEA 创建Maven项目速度慢的问题
方法一(推荐) 在创建Maven项目时加上 archetypeCatalog=internal 参数,如下: 方法二 在maven的VM Options加上-DarchetypeCatalog=int ...
- [AT2064] [agc005_f] Many Easy Problems
题目链接 AtCoder:https://agc005.contest.atcoder.jp/tasks/agc005_f 洛谷:https://www.luogu.org/problemnew/sh ...