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