动态路由页面切换的问题解决及NavigationDuplicated报错处理

动态路由页面切换的问题及解决

动态路由:适用于页面结构相似，数据不同，大量重复的情况.使得url地址可以变化，多个地址对应同一个组件，达到复用的目的

使用动态路由：

1. 修改路由path: '/goodsDetail/:id',:id表示id的值是一个变量
2. 跳转页面时，遵循路由的格式

<router-link :to="'/productDetail/'+id+'/'+name+'/'+price">xx</router-link>

或者：

    this.$router.push('/productDetail/'+id+'/'+name+'/'+price);

3. 获取动态路由的参数`$route.params.xxx`

出现的问题描述：
点击切换路由，能改变路由也没能拿到数据，但页面不会发生改变，需要手动刷新之后，页面才会切换到想要的内容。

出现问题的原因：
原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

解决方法：

1. 使用watch和路由守卫

watch: {
    // 监听当前路由对象的改变
    $route: {
      handler(newV, oldV) {
        console.log(newV, oldV);
        console.log('我请求了'+newV.params.id+'的数据');
      }
    }
  }

路由守卫:在页面跳转时，提供拦截处理的功能。通常用于权限校验和登录判断等。
1. 根据作用范围的大小，分为全局守卫、路由独享的守卫和组件内的守卫。
2. 根据作用顺序的前后，分为前置守卫、解析守卫、后置守卫等。
3. 全局守卫：每次页面跳转都会触发，无论哪个页面都会触发.代码写在路由的index.js或者main.js中。

 // 组件内的守卫-路由更新
 // 全局前置守卫,写在main.js或者router/index.js中
  beforeRouteUpdate(to, from, next) {
   // to：下一个页面的路由对象，即将进入的那个页面
   // from：当前页面的路由对象，正在离开的这个页面 
    console.log('我请求了'+to.params.id+'的数据');
    next()
  }

ps：重复点击跳转同一个地址，浏览器可能会报的错

NavigationDuplicated: Avoided redundant navigation to current
location.

解决方法：
// 解决:NavigationDuplicated: Avoided redundant navigation to current location.捕获错误
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}