vue3+ts跳转url地址

在Vue 3中使用TypeScript配合Vuex管理路由，你可以使用`vue-router`库来实现页面之间的跳转。首先，你需要安装相关的依赖：

npm install vue-router @vuejs/composition-api vuex

然后，在你的项目结构中，通常会在`store`文件夹下创建一个`routerStore.ts`来配置路由和状态管理。例如：

import { createRouter, createWebHashHistory } from 'vue-router';
import { defineStore } from 'pinia';

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(), // 使用默认的哈希历史模式
  routes: [
    // ...你的路由配置项
  ]
});

// 定义Vuex store
export const useRouterStore = defineStore('router', {
  state() {
    return {
      route: router.currentRoute.fullPath,
    };
  },
  actions: {
    navigate(path: string) {
      router.push(path);
    },
  },
});

在组件中，你可以导入并使用`useRouterStore`来获取当前路由，并通过`actions.navigate`方法进行跳转：

import { useRouterStore } from '@/store/routerStore';

export default {
  setup() {
    const routerStore = useRouterStore();
    
    const handleClick = () => {
      routerStore.navigate('/new-url');
    };

    return {
      handleClick,
    };
  },
};

当点击按钮或者其他事件触发时，会调用`navigate`方法更新URL并导航到新的页面。