1 安装
npm install vue-router@4
2 基础使用
定义路由
router.js
import { createRouter,createWebHashHistory} from ‘vue-router‘ import About from ‘../components/About.vue‘ const routes = [ { path: ‘/about‘, component: About }, //{ path: ‘/home‘, component: Home }, ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router
注册路由
main.js
import { createApp } from ‘vue‘ import App from ‘./App.vue‘ import router from ‘./router/index.js‘ createApp(App).use(router).mount(‘#app‘)
使用路由
App.vue
<template> <!-- 创建超链接 可以在不重新加载页面的情况下更改URL--> <router-link to="/about">Go to About</router-link> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </template>