Vue的路由设置
一、路由基础介绍
1、什么是前端路由?
路由是根据不同的url地址展示不同的内容或页面
前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务器根据url的不同返回不同的页面实现的(只更新页面的某一部分,而不是整体重新加载了)
2、什么时候使用前端路由?
在单页面应用,大部分页面结构不变,只改变部分内容的使用
3、优缺点
优点:
用户体验好,不需要每次都从服务器全部获取,快速展现给用户
缺点:
不利于SEO
使用浏览器的前进、后退键的时候会重新发送请求,没有合理地利用缓存
单页面无法记住之前滚动的位置,无法再前进、后退的时候记住滚动的位置
二、vue路由
vue-router用了构建SPA
<router-link></router-link>或者this.$router.push({path:''}) 跳转标签
<router-view></router-view>
三、动态路由匹配
什么是动态路由
四、嵌套路由
什么是嵌套路由
五、编程式路由
通过js来实现页面的跳转
$router.push("name")
$router.push({path:"name"})
$router.push({path:"name?a=123"})或者$router.push({path:"name",query:{a:123}})
$router.go(1)
六、命名路由和命名视图
给路由定义不同的名字,根据名字进行匹配
给不同的router-view定义名字,通过名字进行对应组件的渲染
Vue的路由设置的更多相关文章
- vue的路由设置小结
vue的路由设置小结 // 异步路由的编写示例.其中针对component字段进行懒加载及分块处理,提升首屏加载速度的同时,也可以手动控制让某些页面合并到一个单独的js文件中,而不是每个页面都是一个j ...
- 【Vue的路由,SPA概念】
前言 本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现 单页Web应用 因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念 总的而言,我们知 ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- react一看就会的简单路由设置
不管是vue还是react 这种单页面的框架一定都少不了路由 下面给大家讲讲在实际项目中react的路由设置 第一步: 在src目录下新建一个目录route 在该目录下新建一个index.js用于 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue嵌套路由 && 404重定向
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rou ...
- Vue 前端路由 vue-router
1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...
- vue嵌套路由与404重定向实现方法分析
第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思. 比如在vue中,我们如果不使用嵌套路由,那么只有一个<rout ...
随机推荐
- 优化myeclipse启动速度以及解决内存不足问题
解决myeclipse内存不足问题: 使用 MyEclipse 开发项目后,随着项目文件的增多,以及运行时间的增加,实际上 MyEclipse 所消耗的内存是会一直增大的,有的时候会出现 MyEcli ...
- 线性表(java)
线性表 概念:零个或者多个数据元素的有限序列. 特点:除了第一个元素没有前驱结点,最后一个元素没有后继结点外,其它元素有且仅有一个直接前驱和一个直接后继结点.元素的个数必定为有限个. 实现: 定义一个 ...
- JavaScript中对数据库表中某一个字段进行赋值
场景如下,通过下拉列表选择一个选项(如“启用”和“不启用”),启用用0表示,不启用用1表示. enableFlag是表中一个字段,我猜date:后面就是对该字段的赋值.
- POJ3678 Katu Puzzle
原题链接 \(2-SAT\)模板题. 将\(AND,OR,XOR\)转换成\(2-SAT\)的命题形式连边,用\(tarjan\)求强连通分量并检验即可. #include<cstdio> ...
- 洛谷4782 【模板】2-SAT 问题
原题链接 \(2-SAT\)模板 #include<cstdio> using namespace std; const int N = 2e6 + 10; int fi[N], di[N ...
- Null value was assigned to a property of primitive type setter of cn.itcast.oa.domain.Forum.topicCount
[引用http://m.blog.csdn.net/blog/u013998070/41087351] Null value was assigned to a property of primiti ...
- IOS初级:delegate的使用
delegate的应用场景:view中的事件,controller做处理(如刷新view中元素等). storyboard的textfield实现点击return实现收起键盘. 首先在ViewCont ...
- JVM新生代到老年代基础了解
JVM区域总体分两类,heap区和非heap区. heap区又分为: - Eden Space(伊甸园). - Survivor Space(幸存者区). - Old Gen(老年代). 1个Eden ...
- kbmmw 5.0 beta1 发布
经过大半年的等待,kbmmw 的新版终于来了.经过近5年的打磨, kbmmw 的版本号升级到5了. kbmMW is a portable, highly scalable, high end app ...
- AOP 环绕通知 (Schema-base方式) 和 AspectJ方式在通知中获取切点的参数
环绕通知(Schema- base方式) 1.把前置通知和后置通知都写到一个通知中,组成了环绕通知 2.实现步骤: 2.1 新建一个类实现 MethodInterceptor 接口 public cl ...