本篇文章主要介绍了vue行为,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

行为

什么是路由的行为

当切换到新路由时,想要页面滚到顶部,或者是保持原先的位置,就像重新加载页面那样

注意: 这个功能只在 HTML5 history 模式下可用。在这个模式下我们需要启动一个服务

我们用scrollBehavior 方法来做路由

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用

下面我们做一个小案例来了解一下

效果

<div id="app">
  <h1>行为</h1>
  <ul>
    <li><router-link to="/">首页</router-link></li>
    <li><router-link to="/foo">导航</router-link></li>
    <li><router-link to="/bar">关于</router-link></li>
    <li><router-link to="/bar#an1">红色页面</router-link></li>
    <li><router-link to="/bar#an2">蓝色页面</router-link></li>
  </ul>
  <router-view></router-view>
</div>
<script>
  var Home = {
    template:"<div>home</div>"
  }
  var Foo = {
    template:"<div>foo</div>"
  }
  var Bar = {
    template:
      `
        <div>
          bar
          <div></div>
          <p id="an1">红色页面</p>
          <p id="an2">蓝色页面</p>
        </div>
      `
  }

  var router = new VueRouter({
    mode:"history",
    //控制位置
    scrollBehavior (to, from, savedPosition) {
      //判断如果条的位置存在直接返回到当前位置,否者返回到起点
      if (savedPosition) {
        return savedPosition
      } else {
        if (to.hash) {
          return {selector: to.hash}
        }
      }
    },
    routes:[
      {
        path:"/",component:Home
      },
      {
        path:"/foo",component:Foo
      },
      {
        path:"/bar",component:Bar
      }
    ]
  });
  var vm = new Vue({
    el:"#app",
    router
  });
</script>

vue小案例

https://besmall.github.io/vue-gundong/

https://github.com/Besmall/vue-gundong

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
超过一半的德国零售商对圣诞节持悲观态度

超过一半的德国零售商

根据德国零售协会(HDE)对550家公司的调查,超过一半的德国
跨境电商年内进出口猛增 产业链持续受益

跨境电商年内进出口猛

刚刚过去的“黑色星期五”购物节叠加海外年末节庆,国内
新茶饮“攻心”Z世代:超七成茶饮消费者具有“宅”属性

新茶饮“攻心”Z世代:

阿里本地生活线上大数据显示,2020年新茶饮门店数整体上
那些离开P2P的人:亲历者讲述泡沫如何破裂

那些离开P2P的人:亲历

“大部分人都离开了这个行业。”
经历动荡的一周后 创历史纪录的比特币将面临考验

经历动荡的一周后 创

比特币已较今年3月的低点飙升逾300%,上周触及历史最高
蔚来一年:从破产边缘到“泡沫之巅”

蔚来一年:从破产边缘到

蔚来汽车过去一年从破产的边缘又重回“泡沫之巅”,股价
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,