Vue 子路由 与 单页面多路由 的区别

跟着学完了基础课程,打算整理一波笔记,对基本概念梳理一遍,惊觉对子路由和单页面多路由混淆的一塌糊涂。

果然,基础课程的坑新手是体会不到的。

由于子路由仅嵌套了一层,多路由给了左右两个组件,而且两个都是在默认组件下进行的。于是,妥妥误会俩作用一样。我发现自己问题,并尝试网上找到区别时,发现并没有人写出来。只好去官网看了一下文档。

哇塞,真是一语惊醒梦中人啊!!!

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

再看看传说中的多路由是啥

嗯,也不叫多路由,而是叫命名视图,上面写着要 “ 同时展示多个视图,而不是嵌套展示 ” ,瞬间醍醐灌顶有没有,区别一下子讲的清清楚楚明明白白,传说的多路由就是放多个平级的视图进行展示,而子路由则是嵌套路由,是一层层嵌套展示的。

不懂还是要看文档,别上网到处查,文档写的还是比较清楚的

END~~~≥ω≤

时间: 2024-07-31 05:54:55

Vue 子路由 与 单页面多路由 的区别的相关文章

第4节:单页面多路由区域操作

这节课我们讲"单页面多路由区域操作",实际需求是这样的,在一个页面里我们有2个以上<router-view>区域,我们通过配置路由的js文件,来操作这些区域的内容.例如我们在src/App.vue里加上两个<router-view>标签.我们用vue-cli建立了新的项目,并打开了src目录下的App.vue文件,在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式. 1 2 3 <rout

nignx部署Vue单页面刷新路由404问题解决

在linux下搭建nginx测试网页的时候,正常打开可以访问,当刷新后页面出现404 not found的问题 说明: vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = new VueRouter({

单页面应用路由的实现方式

什么是 SPA? SPA就是单页面应用,即single page application,通过看代码就可以发现,整个网站就只有一个Html文件. WHY SPA? 减小服务器压力. 如果不用SPA,那么我们每次切换页面的时候,就会向服务器发送一个请求,服务器返回一个html文件:但是如果使用了SPA,在切换时,不需要请求服务器,只要通过本地的js来切换即可.并且服务器端就不需要配置路由,完全做到了前后端分离,这对于分工合作的意义可想而知. 增强用户体验,增加app的使用流畅性. 做过spa的同学

vue、react等单页面项目部署到服务器的方法及vue和react的区别

最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

Angular——单页面与路由的使用

单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个"原生"应用. 在PC端也有广泛的应用,通常情况下使用Ajax异步请求数据,然后实现内容局部刷新,局部刷新的本质是动态生成DOM,新生成的DOM元素并没有真实存在于文档中,所以当再次刷新页面时新添加的DOM元素会"丢失",

用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 6.10.3 的版本,相对稳定. 2.使用 npm 管理依赖 使用 node 自带的包管理工具 npm 管理项目中的依赖,由于 npm 的服务器在国外.经常会遇到速度奇慢或者下载不下来依赖的情况,所以推荐使用淘宝镜像. npm install-g cnpm--registry=https://reg

处理 Vue 单页面应用 SEO 的另一种思路

vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介

webpack配合vue.js实现完整的单页面demo

本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的服务器在国外,可能我们下载的过程会比较慢,所以建议用阿里的镜像cnpm安装,10分钟实时更新一次npm的镜像.具体的下载配置参考阿里的cnpm官网.本文章只是和大家探讨怎么利用webpack配合vue.js做一个单页面应用,具体关于vue里面的内容怎么写并不在本篇文章的介绍范围. 1. 定义我们de

处理 Vue 单页面 SEO 的另一种思路

vue-meta-info 官方地址: https://github.com/monkeyWang... (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.React,可谓妇孺皆知.随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求. 本文主要针对 vue 2.0 单页面 Meta SE