vue-router 文档
    vue-router 源码

    在 main.ts 中挂载实例

    1. import Vue from 'vue';
    2. import App from './App.vue';
    3. import router from './router';
    5. Vue.config.productionTip = false;
    6. new Vue({
    7.   router,
    8.   render: h => h(App)
    9. }).$mount('#app')

    路由配置的组件将渲染到 中

    1. <template>
    2.   <div id="app">
    3.     <!-- 路由出口 -->
    4.     <!-- 路由匹配到的组件将渲染在这里 -->
    5.     <router-view/>
    6.   </div>
    7. </template>

    在 router/index.ts 中配置路由

    1. import Vue from 'vue';
    2. import VueRouter, { RouteConfig } from 'vue-router';
    3. import Money from '@/views/Money.vue';
    4. import Labels from '@/views/Labels.vue';
    6. Vue.use(VueRouter);
    8. const routes: Array<RouteConfig> = [
    9.   {
    10.     path: '/',
    11.     redirect: './money' // 重定向
    12.   },
    13.   {
    14.     path: '/money',
    15.     component: Money
    16.   },
    17.   {
    18.     path: '/labels',
    19.     component: Labels
    20.   },
    21.   {
    22.     path: '*',
    23.     component: NotFound
    24.   }
    25. ]
    27. const router = new VueRouter({
    28.   routes
    29. })
    31. export default router;

    在任意需要跳转页面的地方设置路由

    1. <template>
    2.     <!-- 使用 router-link 组件来导航. -->
    3.     <!-- 通过传入 `to` 属性指定链接. -->
    4.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    5.     <nav>
    6.       <router-link to="/detail"> 明细 </router-link>
    7.       <router-link to="/money"> 记账n</router-link>
    8.     </nav>
    9. </template>
    11. <script lang="ts">
    12.     export default {
    13.         name: 'Nav',
    14.     }
    15. </script>

    相关阅读：
    前端路由
    Vue Router 4