image.png

npm install vue-router@4

router/index.ts

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
      {
          path: '/',
          redirect: '/index'
      },
      {
          path: '/index',
          name: 'index',
          component: () => import('../views/index.vue')
      },
    ]
})

export default router

components/hello.vue

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: 'Hello',
  props: {
    msg: {
      type: String,
      required: true,
    },
    obj: {
      type: Object,
      required: true,
    }
  },
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
});
</script>
<template>
  <div class="hello-wrap">
    <div class="container">{{ msg }}</div>
    <div class="container">{{ obj.msg }}</div>
    <button type="button" @click="count++">count is: {{ count }}</button>
  </div>
</template>
<style lang="scss" scoped>
// $bg: orange;
.container {
  background-color: $orange;
}
</style>

view/index.vue

<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <Hello :msg="word" :obj="obj"></Hello>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import Hello from "../components/Hello.vue";

export default defineComponent({
  name: "Index",
  components: {
     Hello
  },
  setup() {
    let word = ref("msg word");
    let obj = reactive({
      msg: "reactive word",
    });
    return {
      word,
      obj,
    };
  },
});
</script>

App.vue

<template>
  <router-view />
</template>

http://localhost:3000/index