vue3中使用route

在Vue3中使用`route`，需要先安装`vue-router`，然后在`main.js`中引入并使用。

1. 安装`vue-router`

npm install vue-router

2. 在`main.js`中引入并使用`vue-router`

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

3. 在`router.js`中定义路由

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

4. 在组件中使用`route`

<template>
  <div>
    <h1>{{ $route.path }}</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

在上面的例子中，我们在`<h1>`标签中使用了`$route.path`来获取当前路由的路径，而在`<router-link>`标签中使用了`to`属性来指定路由路径。