安装
npm install vue-router
yarn add vue-router
案例
main.js
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App'
import AppFather from './components/AppFather'
// 路由映射表
const routes = [
{
path: '/',
component: AppFather
},
{
path: '/appHeader',
// 动态导入
component: () => import('./components/AppHeader.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes // `routes: routes` 的缩写
})
const app = createApp(App);
app.use(router);
app.mount('#app');
App.vue
结果
动态路由
很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数 :
路径参数 用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此,我们可以通过更新 User 的模板来呈现当前的用户 ID:route讲解
setup语法糖中使用useRoute()获取route实例。其他的语法跟以前的没啥两样。
官方文档