Trying to create breadcrumbs, by getting the URL full path and spliting in a Array, then, loop through that array as render some crumbs.

the issue is that crumbs wont get updated when a route changes, how can i make this work?

export default defineComponent({
  setup() {
    const store = useThemeStore();
    const { fullPath } = useRoute();

    return {
      changeThemeStore: computed(() => store.changeTheme),
      currentTheme: store.getCurrentTheme === "dark",
      crumbs: computed(() => fullPath.substring(1, fullPath.length).split('/')).value
    };
  },
  methods: {
    changeTheme() {
      this.changeThemeStore();
    },
    goToRoute(crumb: string) {
      this.$router.push('/'   crumb)
    }
  },

CodePudding user response：

Try to not destruct the current route and use it directly, it seems that destructed object loses the reactivity :

 const route = useRoute();
...
 crumbs: computed(() => route.fullPath.substring(1, route.fullPath.length).split('/'))