vue-router的常见问题解决

在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的，我们只要把路径和组件对应起来就可以了，然后在页面中把组件渲染出来。

在router.js中的固定写法

const router = new Router({
    //   mode: 'history',
    routes,
    base: process.env.BASE_URL,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            if (to.hash) {
                return {
                    selector: to.hash
                }
            }
            return { x: 0, y: 0 }
        }
    }
})

这串代码的作用就是记录页面的滚动位置，如果前进后退回到记录位置，to.hash是模拟『滚动到锚点』的行为，其他情况回到顶部

自定义滚动记录行为请参考：https://www.jianshu.com/p/c805b74e1f14?utm_campaign

当你的Vue项目在当前的路由下企图再次导航到当前路由时就会出现NavigationDuplicated的问题：

出现原因：当多次点击跳转同一个路由时，没有处理抛出异常

解决方式：卸载vue-router，换个版本

                  在出现的页面跳转时 使用 replace 更好router.replace(路径)（最优解）

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    // 别忘了最后调用next
    next()
  }

                直接在router.js中添加（抛出异常）

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

当不同路由指向同一个页面时，需要重新加载页面时：

1.<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件 在这个组件中绑定唯一的key值即可（最优解）

2.在watch中监听$route的变化，然后重新加载组件

当需要判断加载路由的组件时，使用路由元信息：

<router-view v-if="$route.meta.fullScreen" />

 {
        path: '/previewbm', // 策划单预览
        name: 'previewbm',
        /*  component: () =>
             import ('@/topic/views/pages/PreviewBm.vue'), */
        component: () =>
            import ('@/topic/views/pages/BanmianPage.vue'),
        meta: { fullScreen: true, noaside: true }
    },