将购物车存储在本地存储中并保留路由更改的数据vue

Question

我每次更换路线时都会清理一辆车，即使我改变了路线，也要保留此购物车。我正在使用手表来改变路线。我可以成功将购物车产品添加到LocalStorage，但是当我更改路线并添加其他类别的产品时，localStorage会清除。我怎样才能通过localStorage坚持我的购物车？ 这是我的代码：

    addTocart: function (product) {
          this.cartProducts.push(product)
          console.log(this.cartProducts)
          this.showCart = true
// successfuly added to localStorage
          window.localStorage.setItem('cart', JSON.stringify(this.cartProducts))
        },

在网址上更改产品

watch: {
    '$route.params.categoryId': function (id) {
      this.getProducts()
// I am trying to get the cart from localStorage at this point
      this.cartProducts = window.localStorage.getItem('cart')
      console.log(this.cartProducts)
    }
  },

即使我从其他路线添加产品，如何从本地存储访问我的购物车？