页面跳转(包括vue路由)
1、JS实现页面跳转
1.1 使用window.location的href属性跳转
window.location.href = 'http://www.baidu.com';此处window可以省略,href也可以省略。
document.location ='http://baidu.com'
1.2 使用window的一些方法进行跳转;
window.location.assign('http://www.baidu.com');
window.location.replace('http://www.baidu.com');
window.open('http://www.baidu.com', '_blank'); 此处_target属性(blank 或者self)可以用来决定页面是在当前页面打开还是在新的页面打开。可以通过控制参数,控制新页面打开的方式。
window.navigate('http://www.baidu.com');
1.3 利用html的一些标签进行跳转
<a href="http://baidu.com" _target="blank"></a>; 此处_target属性可以用来决定页面是在当前页面打开还是在新的页面打开。
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/> 在5s之后跳转到百度搜索页面效果。
1.4 实现页面返回上一页或者去下一页。
window.history.back(-1)
window.history.go(1); 参数如果是整数就前进,是负数就返回上一个页面。
2. vue中路由router实现页面跳转
2.1 引入并注册vue-router
(component后面接引入的单页面组件名称 );
2.2导航方式
声明式导航 <router-link to="http://baidu.com"></router-link>
编程式导航
this.$router.push()
router.push({ name: 'user', params: { userId }}) // -> /user/123
(详见:https://router.vuejs.org/zh/guide/essentials/navigation.html)
this.$router.replace()
this.$router.go()
2.3 全局路由守卫
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
to: Route
: 即将要进入的目标 路由对象from: Route
: 当前导航正要离开的路由next: Function
: 一定要调用该方法来 resolve 这个钩子。执行效果依赖next
方法的调用参数。
页面跳转(包括vue路由)的更多相关文章
- vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
- vue路由基础总结
1.创建项目 为了练习路由 这里没有选择路由 就选了Bable 自己一步一步的配置 加深印象. 然后下载路由 npm install vue-router --save 2.基础配置 src文件下新建 ...
- vue 路由动态传参 (多个)
动态传参 传值页面 客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面 客户详情CustomerDetails.vue 通过this.$router.para ...
- Vue路由跳转到新页面时 默认在页面最底部 而不是最顶部 的解决
今天碰到一个问题 vue路由跳转到新的页面时会直接显示页面最底部 正常情况下是显示的最顶部的 而且好多路由中不是全部都是这种情况 折腾好长时间也没解决 最后在网上找到了解决办法 其实原理很 ...
- Vue路由守卫(跳转页面置顶的处理方)
在用Vue 框架开发时,在电脑调试没有任何问题,但是用手机调试时会发现页面跳转的不对.就是跳转时页面展示的滑动位置不对,会保留上次跳转页面时的跳转位置.因此需要对页面的路由跳转进行优化,需要用到Vue ...
- Vue路由实现页面跳转的两种方式(router-link和JS)
Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用 1.通过 <router-link> 实现 <router-link> 组件用于设置一 ...
- vue路由跳转取消上个页面的请求和去掉重复请求
vue路由跳转取消上个页面的请求和去掉重复请求 axios 的二次封装(拦截重复请求.异常统一处理) axios里面拦截重复请求
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面
https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...
随机推荐
- flume 进阶
一.flume事务 put事务流程: 1.doPut:将批量数据先写入临时缓冲区putList 2.doCommit:检查Channel内存队列是否足够, (1)达到一定时间没有数据写入到putLis ...
- Elasticsearch7.X 入门学习第五课笔记---- - Mapping设定介绍
原文:Elasticsearch7.X 入门学习第五课笔记---- - Mapping设定介绍 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本 ...
- 类的基本概念及self是什么东西?
class 类 对一类拥有相同属性的对象的抽象.蓝图.原型,在类中定义了这些对象都具备的属性.共同方法 object对象 一个对象就是一个类的实例化模型,一个类必须经过实例化后才能在程序中调用,一个类 ...
- python学习笔记(9):容器
一.容器 0.判断所有的容器是否为空,用if not xxx(容器名):来进行判断 1.list 列表 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一 ...
- .NET File 多图上传
HTML代码: <div> <div> <input type="file" style="display:none" id=&q ...
- linux 配置 Sersync
[root@SERSYNC sersync]# cp conf/confxml.xml conf/confxml.xml.bak.$(date +%F) [root@SERSYNC sersync]# ...
- 一、bootstrap-upload
一.bootstrap-upload 前端代码: @{ Layout = null; } <!DOCTYPE html> <html lang="zh-CN"&g ...
- Codeforces Round #425 (Div. 2) - A
题目链接:http://codeforces.com/contest/832/problem/A 题意:有n个棍子,两个人轮流取这些棍子,每个人每次只能去恰好k个棍子(不足k个则不能取),问先手取的棍 ...
- HDU 4678 Mine(博弈)
Mine Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Submi ...
- [Luogu2014]选课(树形dp)
[Luogu2014]选课 题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课 ...