Vue填坑

路由高亮，方式有两种

一是使用内置的router-link-active类名，因为当前路由会自动加上此类名
二是在router.js里配置，链接激活时使用自己的样式

export defalut new Router({
  mode:'history',
  base:process.env.BASE_URL,
  linkActiveClass:'myActive'
})

路由嵌套，默认显示某个子页面

 children:[
  {
    path:'',
    component: () => import('./views/home/FinanceHall'),  // 默认显示此组件
   },
   {
    path:'financeHall',
    component:() => import('./views/home/FinanceHall')
   },
   {
    path:'myFinance',
    component:() => import('./views/home/MyFinance')
   }
],

Vue返回上一页

使用this.$router.back()或this.$router.go(-1)，甚至history对象都可返回上一页
需要注意的是若AB两个页面互相push()跳转，则多次跳转后返回上一页时也是在AB间来回跳
所以应该使用replace()，使用后B页面将不会被记录到浏览历史记录中

this.$router.replace()
<router-link to="" replace>

默认高亮的路由

如一进入页面，默认底部“首页”高亮
在路由规则中添加重定向即可

{
  path: '/',
  redirect:'/home',
  component: Home,
  meta: {
    index: 0,
    showFooter: true
  }
}

scoped穿透

组件的scoped可避免样式影响到其他组件，但又因为如此，不能在本组件中修改其他组件样式
若要修改，CSS里需要加上>>>，less中是/deep/

.swiper-pagination >>> .swiper-pagination-bullet-active{
  background:red;
}

Vue scrollBehavior滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，
就像重新加载页面那样，使用vue-routter可以自定义路由切换时页面如何滚动
Vue scrollBehavior 滚动行为

const router = new Router({
    // mode: 'history',
    // base: base,
    routes: [ ... ],
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }
});

数组元素或对象属性更新不会让视图更新，因为检测不到数组元素或对象属性的变化
此时列表的刷新可使用Vue.set()或this.$set()

或this.$forceUpdate()强制重新渲染视图