Vue项目创建配置路由

Dev _

已于 2023-04-20 20:46:27 修改

阅读量327

点赞数

于 2023-04-20 20:44:37 首次发布

wushen

本文链接：https://blog.youkuaiyun.com/qq_44317018/article/details/130275308

版权

本文介绍了Vue项目的路由创建和配置过程。首先，清理App.vue，只保留#app内的router-view，然后删除views文件夹中的About和Home，接着从router.js中移除相关导入和路由对象。接下来详细阐述了创建组件、导入到router.js、配置路由和设置路由出口（在App.vue和Layout.vue中的router-view）的步骤。特别提到Layout.vue作为二级路由出口，需要避免使用/path/layout来防止冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue内容清除,保留template #app router-view, views文件夹里面的About和Home删除 > router.js里面import HomeView from '…/views/HomeView.vue’删除 > routes数组里面的路由对象全部删除

创建项目路由

一创二导三配置四找出口

一创 : 创建好组件, template>div里面写上组件名称

二导 : 导入到router/index.js当中

import Login from '@/views/login/Login.vue'
import Layout from '@/views/layout/Layout.vue'
import Home from '@/views/home/Home.vue'
import Shop from '@/views/shop/Shop.vue'
import AccountList from '@/views/account/List.vue'
import AccountAdd from '@/views/account/Add.vue'
import AccountModify from '@/views/account/Modify.vue'
import Personal from '@/views/account/Personal.vue'
import GoodsList from '@/views/goods/List.vue'
import GoodsAdd from '@/views/goods/Add.vue'
import GoodsCate from '@/views/goods/Cate.vue'
import Order from '@/views/order/Order.vue'
import GoodsTotal from '@/views/sales/GoodsTotal.vue'
import OrderTotal from