Vue3router
时间: 2023-10-28 08:25:37 浏览: 73
Vue3 +router
Vue 3中的路由管理器被称为Vue Router。它是一个官方提供的插件,用于在Vue应用程序中实现单页面应用(SPA)的路由功能。Vue Router使得在应用程序中导航和管理不同页面变得更加方便。
在Vue 3中,安装和使用Vue Router与Vue 2基本相同。你需要使用npm或yarn安装Vue Router,并在你的应用程序中引入它。然后,你可以在Vue应用程序的根组件中使用Vue Router。
以下是一个简单的示例,展示了如何在Vue 3中使用Vue Router:
```javascript
// 安装Vue Router
npm install vue-router
// main.js
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')
```
上述代码中,我们首先从`vue-router`包中导入`createRouter`和`createWebHistory`函数。然后,我们创建了一个路由实例,并定义了两个路由:'/'和'/about'。这些路由分别对应了`Home`和`About`组件。
最后,在应用程序的入口文件中,我们使用`app.use(router)`来安装并启用Vue Router。现在,你的Vue 3应用程序就已经可以使用Vue Router进行路由管理了。
当然,这只是一个简单的示例,Vue Router还提供了许多其他功能,比如路由参数、嵌套路由、导航守卫等等。你可以查阅Vue Router的官方文档以了解更多详细信息和用法示例。
阅读全文