精华内容
下载资源
问答
  • vue 路由跳转 外部链接
    万次阅读
    2019-10-23 10:02:36

    1、vuejs 是单页面应用,应用内的跳转,可以用router-link标签

    跳转demo

    <router-link tag=‘span’ to="#" @click.native=“handleEditPassword”>
    修改密码

    2、跳转到站外用a标签

    跳转demo

    扩展:

    组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

    比起写死的 会好一些,理由如下:

    无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
    在 HTML5 history 模式下,router-link 会拦截点击事件,让浏览器不在重新加载页面。
    当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
    Props

    to
    类型: string | Location
    required
    表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。
    Home

    Home

    Home

    Home

    Home

    User

    Register
    replace
    类型: boolean
    默认值: false
    设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。
    append
    类型: boolean
    默认值: false
    设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为/b,如果配了,则为 /a/b

    tag
    类型: string
    默认值: “a”
    有时候想要 渲染成某种标签,例如

    • 。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。 foo
    • foo
    • active-class 类型: string 默认值: "router-link-active" 设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。 exact 类型: boolean 默认值: false "是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。 按照这个规则, 将会点亮各个路由!想要链接使用 "exact 匹配模式",则使用 exact 属性:

      查看更多关于激活链接类名的例子 可运行.

      将"激活时的CSS类名"应用在外层元素

      有时候我们要让 “激活时的CSS类名” 应用在外层元素,而不是 标签本身,那么可以用 渲染外层元素,包裹着内层的原生 标签:

      /foo

      在这种情况下, 将作为真实的链接(它会获得正确的 href 的),而 “激活时的CSS类名” 则设置到外层的

    更多相关内容
  • 应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台。 一、知识要点 HTML5引进了history.pushState()...
  • vue项目跳转到外部链接

    千次阅读 2020-12-20 03:44:48
    所以,现在的问题是,怎样跳转到外部链接。开发vue项目的人都知道,vue项目会分为三个版本:开发,测试,生产,我们可以在config文件夹下面的dev.env.js,prod.env.js,test.env.js配置路径。所以我们就会遇到跨域的...

    vue项目中遇到一个打印的功能。思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能。

    所以,现在的问题是,怎样跳转到外部链接。开发vue项目的人都知道,vue项目会分为三个版本:开发,测试,生产,我们可以在config文件夹下面的dev.env.js,prod.env.js,test.env.js配置路径。

    所以我们就会遇到跨域的问题。

    js:

    let Path = process.env.APP_EXCEL_PATH+'print.html?name=1'

    window.open(Path)

    一开始利用地址栏传参的方式,就是直接在路径上添加参数,然后再HTML文件中获取地址参数渲染就行:

    HTML中的js:

    window.οnlοad=function(){

    var n = getParam("name");

    document.getElementById("name").innerHTML = n;

    }

    function getParam(paramName) {

    paramValue = "", isFound = !1;

    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {

    arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0;

    while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++

    }

    return paramValue == "" && (paramValue = null), paramValue

    }

    function printme(){

    document.body.innerHTML=document.getElementById('container').innerHTML+'
    ';

    window.print();

    }

    之后遇到中文转码的问题,在地址栏传入中文会导致乱码问题,后来通过入参时利用encodeURI(encodeURI(name));编码,然后, HTML中利用decodeURI(getParam("name"));解码。解决问题。

    之后,由于入参比较多而且中文也很多,导致地址栏参数长度过长HTML不能全部解读。至此,这个问题无法突破。

    后来想到H5的本地存储,可以在跳转的先给数据存储在本地,然后再HTML中在从本地中取出来。觉得可以实现,然后发现HTMl中的数据为null,原来并没有取到本地数据,发现本地存储也有同源策略的问题,也就是跨域的问题,发现我在本地开发环境时是localhost:8080,而我跳转的页面的域名是127.0.01:8080端口,他们各自都有localStorage。原来问题就是域名,然后我打包在本地的Tomcat运行,发现可以实现。至此,问题解决。

    在vue项目的组件中:

    js:

    let Path = process.env.APP_EXCEL_PATH+'print.html'

    window.open(Path)

    vue 路由跳转到外部链接

    尝试了几次发现,不论怎么写外部链接,最后跳转的路径都会加上localhost:3030; 这个应该是和vue的路由有关系,最后解决方法, window.location = 'http://www.b ...

    vue项目中跳转到外部链接方法

    当我们在文件中,如果是vue页面中的内部跳转,可以用this.$router.push()实现,但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了htt ...

    vue&plus;el-menu设置了router之后如何跳转到外部链接

    点击跳转到xxx 方法:(调用函数) See (e) { window.loc ...

    vue项目微信分享之后路由链接被破坏怎么办

    异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的“#”会被去掉并追加?fromTimel ...

    小程序web-view的使用&comma;跳转到外部链接~

    先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码:

    随机推荐

    Github&plus;Jekyll —— 创建个人免费博客(二)Ruby&plus;Jekyll部署

    摘要: 本文中我将介绍一下如何在github上搭建个人Blog(博客),也顺便让我们掌握一下github Pages功能,另外还涉及到Jekyll技术. ======================= ...

    使用NUGet自动下载&lpar;还原&rpar;项目中使用的包

    签出完整项目后,在解决方案名称上点右键,选择"启用NuGet程序包还原",如下图: 出现询问,当然要点是:是 当完成后,会发现在解决方案中,多出".nuget" ...

    &lbrack;转&rsqb;XSS现代WAF规则探测及绕过技术

    初始测试 1.使用无害的payload,类似,,观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过滤<>等等: 2.如果 ...

    Oracel查询根据部分字段去重复

    一般一个表的id是唯一的,如果除去id则会有重复数据,有时做项目时查询要求根据某几个字段去掉重复记录,并且查询保留id 以下是Oracel查询时根据部分字段去重复,例如,查询的字段包括id,Sys,C ...

    Java Hour 55 Spring Framework 2

    上一章节估计被官方的说明文档扯晕了,其实说白了不就是个IOC 注入的容器么,用过了微软Enterprise Library 的Unity 的我还会怕这个.自己随便写个demo, 将知识的主题框架先构建 ...

    &lbrack;压缩解压缩&rsqb; SharpZip--压缩、解压缩帮助类

    里面有三个类都是用于压缩和解压缩的.大家看下图片 看下面代码吧 /// /// 类说明:SharpZip /// 编 码 人:苏飞 /// 联系方式:361983679 ...

    html5中的一些小知识点(CSS)

    1.点击a标签周围区域就可以进入超链接: a标签 的css样式中的 display属性设置为block 就可以了 2.文字左右居中: text-align 属性值为 center 3.文字上下居中:  ...

    常见的HTTP报头(头参数)

    本内容摘抄自 中文译本附录C '常见的HTTP报头'. 原文作者:Leonard Ricbardson & Sam Ruby 翻译:徐涵. ...

    PHP中redis的使用

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zset(有序集合).这些数据类 ...

    hdu -1114(完全背包)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1114 思路:求出存钱罐装全部装满情况下硬币的最小数量,即求出硬币的最小价值.转换为最小背包的问题. # ...

    展开全文
  • vue链接跳转

    万次阅读 2018-10-23 15:03:12
    1、vuejs 是单页面应用,应用内的跳转可以用router-link标签  &lt;router-link tag='a' :to="'/'" &gt;跳转demo&lt;/router-link&gt; &lt;router-link tag='span' to="#&...

    1、vuejs 是单页面应用,应用内的跳转,可以用router-link标签
     <router-link tag='a' :to="'/'" >跳转demo</router-link>

    <router-link tag='span' to="#" @click.native="handleEditPassword">
    <span class="a-inner"><i class="el-icon-edit"></i> 修改密码 </span>
    </router-link>

    2、跳转到站外用a标签
    <a  target="_blank" :href="scope.row.text1" >
    <span class="a-inner"  ><i class="el-icon-document"></i>跳转demo</span>
    </a>

     
    扩展:
    <router-link>

    <router-link> 组件支持用户在具有路由功能的应用中(点击)导航。 通过 to 属性指定目标地址,默认渲染成带有正确链接的 <a> 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名。

    <router-link> 比起写死的 <a href="..."> 会好一些,理由如下:

    无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
    在 HTML5 history 模式下,router-link 会拦截点击事件,让浏览器不在重新加载页面。
    当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
    Props

    to
    类型: string | Location
    required
    表示目标路由的链接。当被点击后,内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 -->
    <router-link to="home">Home</router-link>
    <!-- 渲染结果 -->
    <a href="home">Home</a>
    <!-- 使用 v-bind 的 JS 表达式 -->
    <router-link v-bind:to="'home'">Home</router-link>
    <!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
    <router-link :to="'home'">Home</router-link>
    <!-- 同上 -->
    <router-link :to="{ path: 'home' }">Home</router-link>
    <!-- 命名的路由 -->
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    <!-- 带查询参数,下面的结果为 /register?plan=private -->
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
    replace
    类型: boolean
    默认值: false
    设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。 <router-link :to="{ path: '/abc'}" replace></router-link>
    append
    类型: boolean
    默认值: false
    设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为/b,如果配了,则为 /a/b

      <router-link :to="{ path: 'relative/path'}" append></router-link>

    tag
    类型: string
    默认值: "a"
    有时候想要 <router-link> 渲染成某种标签,例如 <li>。 于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。  <router-link to="/foo" tag="li">foo</router-link>
    <!-- 渲染结果 -->
    <li>foo</li>
    active-class
    类型: string
    默认值: "router-link-active"
    设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
    exact
    类型: boolean
    默认值: false
    "是否激活" 默认类名的依据是 inclusive match (全包含匹配)。 举个例子,如果当前的路径是 /a 开头的,那么 <router-link to="/a"> 也会被设置 CSS 类名。
    按照这个规则,<router-link to="/"> 将会点亮各个路由!想要链接使用 "exact 匹配模式",则使用 exact 属性:

      <!-- 这个链接只会在地址为 / 的时候被激活 -->

      <router-link to="/" exact>

    查看更多关于激活链接类名的例子 可运行.

    将"激活时的CSS类名"应用在外层元素

    有时候我们要让 "激活时的CSS类名" 应用在外层元素,而不是 <a> 标签本身,那么可以用 <router-link> 渲染外层元素,包裹着内层的原生<a> 标签:

    <router-link tag="li" to="/foo">

      <a>/foo</a>

    </router-link>

    在这种情况下,<a> 将作为真实的链接(它会获得正确的 href 的),而 "激活时的CSS类名" 则设置到外层的 <li>
     

    展开全文
  • 详情页返回列表页时, 用 history.back() 返回 方法三:用默认的hash模式的 一个list页点击进入detail页,我在这时记录下list页滚动条的位置,然后在detail页返回到list页时设置滚动条位置为刚才保存那个。...

    前两种方法需要设置路由history模式,后两种方法貌似更合适。

    方法一:

    1.在router.js里面(即路由文件中),此时模式为 history

    const router = new VueRouter({

    mode: 'history',

    routes,

    scrollBehavior (to, from, savedPosition) {

    if (savedPosition) {

    return savedPosition

    } else {

    if (from.meta.keepAlive) {

    from.meta.savedPosition = document.body.scrollTop

    }

    return { x: 0, y: to.meta.savedPosition || 0 }

    }

    }

    })

    2.在router.js里面需要记录位置的单页面里面

    let routes = [

    {

    path: '/',

    name: 'home',

    component: home,

    meta: {

    title: 'home',

    keepAlive: true

    }

    }

    3.App.vue里面

     这样写的意义就是不缓存所有页面,哪个地方写了 keepAlive:true,哪个地方就记录位置(加缓存)

    4.位置确实记录上了(加缓存,返回不刷新页面),也就是说,返回不触发created,所以有些页面需要返回触发的东西都写在activated里面。其实整个过程很简单,代码也很干练,因为这是路由自带的功能,只不过之前没有发现罢了

    方法二:scrollBehavior方法

    1.router文件中设置为 mode: 'history', 模式

    2.router设置

    scrollBehavior (to, from, savedPosition) {

    if (savedPosition) {

    return savedPosition

    } else {

    return { x: 0, y: 0 }

    }

    }

    3.详情页返回列表页时, 用 history.back() 返回

    方法三:用默认的hash模式的

    一个list页点击进入detail页,我在这时记录下list页滚动条的位置,然后在detail页返回到list页时设置滚动条位置为刚才保存那个值。

    // list页route中的data钩子

    route : {

    data : function () {

    var _this = this;

    // 返回同一个位置

    var scrollTop = sessionStorage.getItem("scrollTop");

    if (scrollTop) {

    _this.$nextTick(function () {

    $(".abuild-record-layout").scrollTop(scrollTop);

    });

    }

    }

    }

    $nextTick将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

    方法四:

    beforeRouteLeave(to, from, next){

    let position = window.scrollY()

    this.$store.commit('SAVE_POSITION', position) //离开路由时把位置存起来

    next()

    }

    在页面中取值

    updated () {

    this.$nextTick(function(){

    let position = this.$store.state.position //返回页面取出来

    window.scroll(0, position)

    })

    }

    用updated 或者 beforeUpdate 钩子都可以  代码都写在要保存滑动距离的界面如果data在进入页面被更新,那update可能不那么合适,这个时候,可以使用组件内守卫

    //组件内的守卫

    beforeRouteEnter (to, from, next) {

    next(vm => {

    // 通过 `vm` 访问组件实例

    vm.$nextTick(function(){

    let position = vm.$store.state.position //返回页面取出来

    console.log("beforeRouteEnter moments update: ", position);

    window.scroll(0, position)

    // setTimeout(function(){window.scroll(0, position)},1000)

    })

    })

    }

    参考:

    https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8

    展开全文
  • 添加域名服务器 把上面复制的填到这里,然后保存。 4.注册DNSPOD http://dnspod.cn 然后批量添加域名。 批量添加解析记录: 5.购买套餐,批量导入域名跳转。 购买套餐联系官网客服,然后修改格式,批量导入域名...
  • 好久不见,时隔多年我又来记录问题来了,记录这次问题的主要原因是减少你我去搜索资源的时间,下面开始讲讲我约到的问题。(下面说的是针对小程序体验版或者开发板哈,正式环境不存在这个问题) 需求:pc端扫码登录...
  • a标签动态改变跳转链接

    千次阅读 2016-01-30 14:03:39
    遇到这样一个问题,需要根据登录用户身份确定点击一个链接跳转至的页面,折腾了半天,终于在大神的帮助下解决了。 一开始使用document.getElementById("user_name").innerHTML一直无法获取正确的,提示“Cannot...
  • 具体可以翻看微信开发者文档--微信网页授权部分。 按照微信开发文档的步骤操作,很容易的就实现了获取openid的功能。到此你可能心中窃喜,so easy!如果你认为实现到此结束,那么很可能qa就会找上来,并且还现场给你...
  • 微信H5链接点击跳转关注公众号

    千次阅读 2020-10-30 00:37:25
    微信H5链接点击跳转关注公众号获取微信公众号唯一标识获取Base64加密后字符串构建H5链接 获取微信公众号唯一标识 ...MjM5NDAwMTA2MA==,记录。 构建H5链接 https://mp.weixin.qq.com/mp/profile_ext?a
  • 单页面hash跳转简要记录

    千次阅读 2016-09-25 20:30:04
    现在有越来越多的需求,需要在一个复杂页面...这里作一下简要记录: 1. pushState  html5 提供了新的 history api,可以让开发者动态修改浏览器的url,而不会引起整个页面的重绘,给用户带来更好的体验,api 定
  • 2.测试链接,这里的url就是扫码之后,跳转到你指定界面里,可以获取到你此处配置这个完整的url包括参数,当然,这个参数是一个动态参数,配置的时候是写死了一个,你的应用中,自己动态生成这个参数, ...
  • 快速跳转官网文档介绍:扫码打开小程序接入指南 开发前相关配置 首先按照官方文档我们先做好配置工作,配置流程如下:小程序后台配置-开发管理-开发设置-扫普通链接二维码打开小程序, 开发过程中配置,举个...
  • HTML页面跳转(重定向)

    千次阅读 2021-06-08 18:05:00
    所以这里要说一句,如果你遇到什么问题,碰巧来的我的博客,可以咨询我一下,但如果你发一些莫名其妙的东西,我就不欢迎了。昨天有一个通过本博客的QQ,找到我,问了一个关于网址跳转的问题,由于时间的关系,没有...
  • 微信小程序页面之间的跳转传参使用最多的就是直接使用 navigator 标签来进行参数的传递,在跳转... 点我向B页面进行跳转,传递id1 </navigator> 向B页面传递参数并进行跳转。然后在A页面的js中使用 onLoad:...
  • 最近在学习Layui的过程中,遇到了内部iframe在点击侧边栏之后无法跳转的情况,故记录此解决方案以做备忘,防止下次再有这样的事情发生。页面想点击左边和上面的侧边栏,然后只在右边的主体白色部分进行页面的转变。...
  • 批量获取/打开链接 - 实践

    千次阅读 2020-01-13 13:57:05
    1.应用场景 批量操作, 打开链接. 2.... 思路: 获取超链接标签, 然后使用批量打开每个超链接, 从而不需要手动一个个打开链接 ... Chrome浏览器/其他浏览器也可以 PHP 7.3 nginx 1.15/1.16 ...
  • } 单链表不带头标准c语言实现 链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时...
  • 1)可以调整用户浏览的URL,看起来更规范,合乎开发及产品人员的需求, 2)为了让搜索引擎搜录网站内容及用户体验更好,企业会将动态URL地址伪装成静态地址提供服务。 3)网址换新域名后,让旧的访问跳转到新的域名上。...
  • javascript实现倒计时跳转页面

    千次阅读 2021-06-12 02:01:13
    很多网页都有类似的效果,那就是经过指定的时间能够跳转到其他页面,如果再人性化一点话,会带有倒计时效果,本章节就介绍一下如何实现此效果,代码实例如下:var t=10;setInterval("refer()",1000);function refer()...
  • ARM汇编--pc 跳转方法

    千次阅读 2014-04-08 19:31:38
    本文介绍了两种比较常规的跳转方法 最后提出一种不是很常用的一种跳转方法 这种跳转可以解决一些汇编问题 简化跳转过程 带来意外惊喜
  • 项目最终效果图: ...此篇博客为自己学习pink老师的课后完成的项目的总结与记录,仅供交流参考。版权所有,转载请标注原作者! 使用echarts技术做的可视图,此外其项目包含 的技术有html、css、js、jquerry、aja.
  • 集成信鸽推送的时候,可以选择集成小米、华为、魅族这三家的厂商推送,按照文档集成后,使用相应厂商的设备运行时,在logcat中,以xinge为tag可以看到很多信息,如果看到other push token不为空的...
  • 网页短链接实现原理探究

    千次阅读 2018-10-03 13:56:19
    什么是短链接? 我的理解就是通过一定的算法和技术实现将原本很长的网址转换为较短的网址,从而便于用户记忆和在互联网上的传播.常用于有字数约束的微博,二维码等场景. 现在很多公司都提供了短链接服...
  • C语言 · 寻找数组中的最大

    千次阅读 2021-05-18 14:58:29
    问题描述对于给定整数数组a[],寻找其中最大,并返回下标。输入格式整数数组a[],数组元素个数小于1等于100。输出数据分作两行:第一行只有一个数,表示数组元素个数;第二行为数组的各个元素。输出格式输出最大,...
  • 详解vue 路由跳转四种方式 (带参数)

    千次阅读 2020-12-19 11:50:06
    不带参数 //name,path都行, 建议用name// 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。2.带参数// params传参数 (类似post)// 路由配置 path: "/home/:id" 或者 ...
  • 03_Vue3.0+TS之页面跳转

    千次阅读 2021-06-19 01:02:25
    历史文章目录连接:https://blog.csdn.net/yy763496668/article/details/113117040此链接为CSDN连接,目的为方便大家一览博客目录!内...
  • WXML: hotrecommend 是接口返回的数组 0}}'> 热门推荐 bindtap="routerview" class="pick_item_wrap" wx:for="{{hotrecommend}}" wx:key=... */ } 效果:点击跳转,左右可以滑动 H5页面 打开小程序 的坑: 待完成

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 71,415
精华内容 28,566
关键字:

什么记录值可以跳转链接

友情链接: USBD12kaifataojian.rar