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>
