1:路由设计配置:
一级路由配置
分析项目,设计路由,配置一级路由
一级路由:单个页面独立展示的,都是一级路由,例如:登录页面,首页架子,报错页面
二级路由:就是包含在一个组件里面的子组件,例如:首页架子里面有首页,我的,购物车等
分析: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这个组件出口中展示出来。最终完成一级,二级路由的展示
二级路由的配置: