vue笔记(router-link tag属性, meta, document.title)

<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.

meta:  https://blog.csdn.net/cofecode/article/details/79181894

 

const router =  new Router({
  // mode: 'history',
  routes: [
    {
      path: '/',
      name: 'productindex',
      component: productindex,
      meta: {
        title: '意礴定制商城'
      },
    },
    // 中转路由
    {
      path: '/transfer',
      name: 'transfer',
      component: transfer,
      replace: true
    },
    {
      path: '/person_center',
      name: 'person_center',
      component: person_center,
      meta: {
        title: '个人中心'
      },
    },
    {
      path:'/submitorder',
      name:'submitorder',
      component:submitorder,
      meta: {
        title: '提交订单'
      },
    },
    {
      path:'/submitordernocustom',
      name:'submitordernocustom',
      component:submitordernocustom,
      meta: {
        title: '提交订单'
      },
    },
    {
      path:'/orderdetail',
      name:'orderdetail',
      component:orderdetail,
      meta: {
        title: '订单详情'
      },
    },
    {
      path:'/commoditydetail',
      name:'commoditydetail',
      component:commoditydetail,
      meta: {
        title: '商品详情'
      },
    },
    {
      path:'/commoditydetailnocustom',
      name:'commoditydetailnocustom',
      component:commoditydetailnocustom,
      meta: {
        title: '商品详情'
      },
    },
    {
      path: '/addresslist',
      name: 'addresslist',
      component: addresslist,
      props: true,
      meta: {
        title: '地址列表'
      },
    },
    {
      path: '/editaddress/:id',
      name: 'editaddress',
      component: editaddress,
      props: true,
      meta: {
        title: '编辑地址'
      },
    },
    {
      path:'/customexplain',
      name:'customexplain',
      component:customexplain,
      meta: {
        title: '定制说明'
      },
    },
    {
      path:'/paystatus',
      name:'paystatus',
      component:paystatus,
      meta: {
        title: '支付状态'
      },
    },
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

export default router

router.beforeEach((to, from, next) => {
  if(to.name == 'transfer'){
    if(store.state.token != ""){
      next(false)
      history.go(-3);
    }else{
      next()
    }
  } else{
  }
})

router.afterEach(route => {
  // 从路由的元信息中获取 title 属性
  if (route.meta.title) {

    document.title = route.meta.title   //文档的显示标题（即窗口或标签页顶部的标题栏）

    // 如果是 iOS 设备，则使用如下 hack 的写法实现页面标题的更新
    if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      const hackIframe = document.createElement('iframe')
      hackIframe.style.display = 'none'
      // hackIframe.src = '/robots.txt?r=' + Math.random()

      document.body.appendChild(hackIframe)

      setTimeout(_ => {
        document.body.removeChild(hackIframe)
      }, 300)
    }
  }
})

 

取消显示高亮:

-webkit-tap-highlight-color:rgba(0,0,0,0) 
//webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。

 

https://blog.csdn.net/XIAOZHUXMEN/article/details/50886299