vue3的模板和路由怎么写？

好的，关于Vue3的模板和路由，我可以给你简单介绍一下。

首先是模板，Vue3使用了新的模板语法，即“Composition API”，它是一种更灵活和可组合的方式来编写组件逻辑。在模板中，你可以使用 `setup()` 函数来设置组件的状态和行为，然后在模板中使用这些状态和行为。

举个例子，下面是一个简单的计数器组件的代码：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

    const increment = () => {
      state.count++;
    };

    return {
      count: state.count,
      increment,
    };
  },
};
</script>

在这个例子中，我们使用 `reactive()` 函数来创建响应式数据对象 `state`，然后在 `setup()` 函数中定义了 `increment()` 方法来更新计数器的值。最后，我们通过 `return` 语句将 `count` 和 `increment` 暴露给模板。

现在是路由部分，Vue3 的路由和 Vue2 的路由用法基本上是一致的。Vue3 仍然使用 Vue Router 来实现路由功能。

首先，你需要安装 Vue Router：

npm install vue-router@next

然后，在你的应用程序中创建一个路由实例，并将其传递给 Vue 的 `createApp()` 方法：

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});

const app = createApp(App);

app.use(router);

app.mount('#app');

在这个例子中，我们创建了一个路由实例，并定义了两个路由：`/` 和 `/about`。然后，我们将路由实例传递给 `createApp()` 方法，并使用 `app.use()` 方法来注册路由插件。

最后，我们使用 `app.mount()` 方法来将应用程序挂载到 DOM 元素上。

这就是 Vue3 的模板和路由的基本用法。希望对你有所帮助！