• vue-router


    HTML
    <router-link to="/" tag='a'>:to可以绑定属性进行更改,在path中name一个名字,:to{name:'path.name'}</router-link>
    <router-view></router-view> 点击某页面,展示某页面
    methods
    // 跳转到上一次浏览的页面
    this.$router.go(-1)
    // 指定跳转的地址
    this.$router.replace('/home')
    // 指定跳转路由的名字下
    this.$router.replace({name:'menuLink'})
    // 通过push进行跳转
    this.$router.push({
      name:'menu'
    })
    router.js 
    path{}
    // 子路由
    children:[
      {path:''},
    ]
    redirect: 默认显示路由
    children: 子路由
    router-view复用
    hmtl
    <router-view name='histroy'>
    {path:'/',components:{
      default:Home,
      'history':History
    }}

     返回页面之前浏览位置

    滚动行为,需要页面有足够高度,并且浏览器需要支持history.pushState
    const,
    mode:'history',
    scrollBehavior(to, from, savedPosition){
      // return {x:0, y=100}
      // return {selector:'.xxx'}
      // 判断是否有savePosition行为,返回之前页面的浏览高度
      if (savePosition) {
        return savePosition
      }else {
        return {x:0, y=0}
      }
    }
  • 相关阅读:
    网页性能分析
    vue学习图解
    px-em-rem单位转换
    呼啦圈(keyframes和transform结合)
    菜单栏鼠标经过伸缩效果
    携程transform放大效果
    浮动布局demo
    倒圆角艺术
    伪类分类
    ingress-nginx 添加https证书
  • 原文地址:https://www.cnblogs.com/dreamMargin/p/10536375.html
Copyright © 2020-2023  润新知