什么是Vue Router?_应用知道什么时候该跳转到哪个页面_- 动态路由匹配使用参数来匹配不同的URL
什么是Vue Router?
Vue Router是Vue.js的官方路由管理器,专门用于构建单页面应用(SPA)。它就像一个导航仪,帮助你的Vue应用知道什么时候该跳转到哪个页面,而不会刷新整个页面。安装Vue Router
要开始使用Vue Router,首先需要把它装到你的项目中。你可以用npm或yarn来安装:
``` npm install vue-router ``` 或者 ``` yarn add vue-router ``` 安装完成后,你就可以在你的项目中开始使用Vue Router了。配置路由
配置路由就像告诉Vue Router哪些URL对应哪个页面组件。比如:
```javascript const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; ``` 在这个例子中,当用户访问根路径(`/`)时,会显示`Home`组件;访问`/about`时,会显示`About`组件。创建路由实例
在配置好路由之后,你需要创建一个路由实例,并把它交给Vue应用。在Vue 3中,通常在`main.js`文件中这样做:
```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes }); ``` 这样,Vue应用就知道怎么通过路由来导航了。将路由挂载到Vue实例中
最后一步是将路由挂载到Vue实例中。在创建Vue应用时,使用`router.use()`方法来完成:
```javascript const app = createApp(...); app.use(router); ``` 这样,你就可以在应用中使用`