vue-router跳转时打开新页面的两种方法
最近还是在痛苦的挣扎中
挣扎吧
记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了)，有两个方法：
1、标签实现新窗口打开
官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target="_blank" 属性的(tag="a")，如下：
新页面打开home页
2、编程式导航
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是 $router.push 和 $router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve,如下：
seeShare(){
let routeUrl = this.$router.resolve({
path: "/share",
query: {id:96}
});
window.open(routeUrl.href, '_blank');
}
何时成为大佬
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。
时间： 2019-07-27
如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下
<
通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录 下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re
通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下 提供了3种方式实现跳转: ①直接修改地址栏中的路由地址
&前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D
对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: Go to view-a p
使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向. 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态.也可以结合sessionStorage 和localStorage使用,原理相同. 用户登录状态验证 路由配置 定义需要判断登录状态的
在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一
本文实例为大家分享了java使用Cookie判断用户登录情况的方法,供大家参考,具体内容如下 1.判断是否登录 public boolean isLogin() { Set cookies = this.browser.getCookies(); String JSESSIONIDID = "JSESSIONID"; String sessionIdID = "sessionId"; String loginID = "logi
本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp
如下所示: 复制代码 代码如下:
用户名:密 码: <
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(
现在的活动,很多都引导用户关注公众号,才能参与到活动当中,那如何才能判断用户关注了公众号呢? 本文就为大家提供php代码,解决问题. 官方接口说明 获取用户基本信息(包括UnionID机制) http://mp.weixin.qq.com/wiki/14/bb5031008f1494a59c6f71fa0f319c66.html 1.只要有基础的access_token和用户openid就可以判断用户是否关注该公众号 2.利用的接口url为:https://api.weixin.qq.com/c
最近在学习ssh框架时,照着网上做了一个商城系统,之前在一些需要用户存在的操作中,都是在每一个action中写重复的代码,这样做现在想起来并不好,想起了spring的aop,于是想通过aop来给每个需要用户操作的Action验证用户登录状态. 想法是这样的: 1. 用户登录时把userId放入session中 2. 通过spring 写一个advice来获取session中的userId,判断用户登录状态,如果userId不符合,则抛出自定义异常 3. 通过struts中配置来捕获异常,跳转界面
这一节讲解下ASP.MVC 2.0的用户登录与注销功能,先讲登录,后说注销.我们这个系列讲的用户登录方式都是FORM表单验证方式.在讲之前先给大家说下的功能,与功能一样,用来动态输出内容. 一.登录 1. 建立MODEL 登录的时候,我们一般只要验证用户名和密码,还有是否保存登录COOKIE,所以我们建立一个MODEL登录类,只需包括3个字段就可以. /// /// 用户登录MODEL ///
实现用户登录并且输入错误三次后锁定该用户 我的测试环境,win7,python3.5.1 提示输入用户名,和密码 判断是否被锁定 判断用户名和密码是否匹配 输入错误三次,账号被锁定 思路 代码块 name = 'alex' #正确的用户名 passwd = '123456' #正确的密码 lock_usr = [] #锁定账号列表 for i in range(0,3): usr_name = input("用户名:") usr_passwd = input("密码:&quo