企业做网站方案,宁波网站建设招商加盟,浙江龙泉建设局网站,智能做网站1#xff1a;路由设计配置#xff1a;
一级路由配置
分析项目#xff0c;设计路由#xff0c;配置一级路由
一级路由#xff1a;单个页面独立展示的#xff0c;都是一级路由#xff0c;例如#xff1a;登录页面#xff0c;首页架子#xff0c;报错页面
二级路由路由设计配置
一级路由配置
分析项目设计路由配置一级路由
一级路由单个页面独立展示的都是一级路由例如登录页面首页架子报错页面
二级路由就是包含在一个组件里面的子组件例如首页架子里面有首页我的购物车等 分析main.js加载App.vue组件页面渲染到index.html里面App.vue组件页面就行构建模板样式通俗来讲就是App.vue里面有什么内容页面上面就会展示什么内容但是将所有的内容写到App.vue组件页面中显然太麻烦然后就出现了路由出口意思就是我在路由里面配置的页面组件在App.vue组件页面配置了一个路由出口路由切换到到哪个组件页面就把哪个组件里面的内容在App.vue组件页面中展示出来。这一种就是一级路由的展示方式像登录页面
在实际场景中通常都是有一级路由和二级路由组合进行展示的例如淘宝的首页架子中里面包含首页组件页面购物车组件页面我的组件页面这种的实现通常搭建自定义一个组件首页架子为一级路由假设是Layout.vue是首页架子在配置路由时将使用children将首页组件页面购物车组件页面我的组件页面配置成二级路由在Layout.vue中添加一个路由出口意思就是配置的二级路由的组件页面将在Layout这个一级组件中展示出来一级路由Layout这个组件将在App.vue这个组件出口中展示出来。最终完成一级二级路由的展示
二级路由的配置