在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 }
    },

 

Logo

前往低代码交流专区

更多推荐