更多 Element Plus 相关内容请前往官网:
此处不做展开。
三、引入路由 Vue-Router
Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得更加简单。
1、安装
npm install vue-router@4 -S
2、在 src 下新建 router 文件夹,且新建一个文件 index.js
可使用如下指令构建最简单的结构(也可在项目中直接创建)。
cd ./src
mkdir router
cd ./router
touch index.js
3、index.js 中的简单内容
import { createRouter, createWebHashHistory } from ‘vue-router’
const routes = [
{
path: ‘/’,
redirect: ‘/componentA’
},
{
path: ‘/componentA’,
name: ‘componentA’,
component: () => import(‘…/components/ComponentA.vue’)
},
{
path: ‘/componentB’,
name: ‘componentB’,
component: () => import(‘…/components/ComponentB.vue’)
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router;
4、在 main.js 中引入 router
// …
import router from ‘./router’
createApp(App).use(ElementPlus).use(router).mount(‘#app’)
5、在 App.vue 使用