vue3动态路由(简单实操demo)， vue3+pinia+router4+typeScript

<template>
  <div>
    <nav>
      <!-- 使用 router-link 组件导航 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <!-- 路由出口，渲染与当前路由匹配的组件 -->
    <router-view></router-view>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../stores/counterStore';
import Home from './Home.vue';
import About from './About.vue';
import { createRouter, createWebHistory } from 'vue-router';
 
// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});
 
export default defineComponent({
  name: 'App',
  setup() {
    // 使用 store 中的状态
    const counter = useStore();
    return { counter };
  },
});
</script>

这个代码示例展示了如何在Vue 3应用中使用Vue Router 4来设置和配置动态路由，以及如何在<script setup>标签中使用TypeScript。它包括了基本的路由定义和导航链接，以及如何在应用中使用Pinia来管理状态。