Vue3.0 简单商城—路由和index页面编写

上一个章节简单编写了header组件Vue3.0 简单商城—Header组件的编写这篇文章简单介绍一下路由和index页面编写1.index页面编写我们创建一个index文件代码参考下面templatediv这是index文件/div/templatescriptexportdefault{name:index,data(){return{};}, components:{}, methods:{},};/scriptstyle/style我们在index文件中引入Header组件。templatedivHeader/Header/div/templatescriptimportHeader from../components/Header.vue;exportdefault{name:index,data(){return{};}, components:{Header,}, methods:{},};/scriptstyle/style2.引入路由可以参考这篇文章vue-路由(1)基础用法 – 每天进步一点点我们在项目中执行npminstallvue-router4引入成功后我们修改main.jsbashimport{createApp}fromvueimportApp from./App.vueimportElementPlus fromelement-plusimportelement-plus/dist/index.cssimportrouter from./router;// 导入路由 const appcreateApp(App)app.use(ElementPlus)app.use(router);app.mount(#app)然后在src路径下单独创建一个文件夹router里面创建一个index.js文件用来存储所有的路由信息。  我们在里面定义初始路由信息 bash import { createRouter, createWebHistory } from vue-router; import index from ../components/index.vue // 定义路由 const routes [ { path: /, name: index, component: index, } ]; // 创建router实例 const router createRouter({ history: createWebHistory(), routes, }); //对外暴露路由器 export default router3.修改App.vue我们修改App.vue在里面引入参考如下templaterouter-view/router-view/templatescriptexportdefault{name:App, components:{},};/scriptstyle/style然后保存重新运行项目。界面运行如下