vue中路由懒加载和手动跳转

懒加载

在前端路由中如果不用懒加载，会在第一次相应的时候将所有的路由页面加载，这样会导致第一次请求等待时间长，用户体验不好，为了优化这种情况就要用到懒加载，当路由切换时候才会加载相关的内容

const rank=import('../components/rank.vue')//普通路由
const rank=()=>import('../components/rank.vue')//懒加载路由

懒加载实际上就是将路由模块保存为一个函数，当路由变为活跃状态时调用函数

手动跳转路由

路由跳转需要使用 router-link 组件进行导航，但是如果开发者希望可以用自己的标签点击实现路由的跳转不能用to属性，我们可以用点击事件函数实现手动跳转

methods:{
    click(){
      this.$router.replace('/rank')
    }
  }

这样在触发click事件的时候就会将当前的路由用replace方法替换为/rank路由，但是这样会出现如果当前路由已经是/rank再点击就会报错的问题，解决方法如下

const VueRouterReplace = Router.prototype.replace
Router.prototype.replace = function replace (to) {
  return VueRouterReplace.call(this, to).catch(err => err)
}

在配置router的文件后面添加上面的代码就可以解决，push方法跳转同理

$router和$route的区别

$router是全局路由
$route是当前处于活跃状态路由