简单手机网站如何制作,网站开发项目视频,垂直网站内容建设,oa管理系统报价一、一级路由设计
一级路由是指直接映射到应用程序中顶级页面或组件的路由。这些路由通常定义在Vue Router的配置中#xff0c;作为应用程序导航结构的基础。
直接映射#xff1a;一级路由直接映射到URL路径和Vue组件#xff0c;没有嵌套关系。顶级导航#xff1a;它们通…一、一级路由设计
一级路由是指直接映射到应用程序中顶级页面或组件的路由。这些路由通常定义在Vue Router的配置中作为应用程序导航结构的基础。
直接映射一级路由直接映射到URL路径和Vue组件没有嵌套关系。顶级导航它们通常用于应用程序的顶级导航如首页、关于页面、用户中心等。配置简单在Vue Router的配置文件中一级路由的配置相对简单只需指定路径和组件即可。
比如我们有两个页面一个是登录页面一个是布局页面都是顶级导航那么这个时候我们就需要一级路由设计
为了加以区分我们现在两个页面上输入点字
布局页面:
script setup/script
templatediv我的布局页面/div
/template
style scope/style
登录页面
script setup/script
templatediv我的登录页面/div
/template
style scope/style
现在我们就需要配置他们的路由
首先我们需要找到src下的router下的index文件这个文件是用来配置路由的
import { createRouter, createWebHistory } from vue-router
import Layout from /views/Layout/index.vue//布局页面
import Login from /views/Login/index.vue//登录页面const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path:/,component:Layout,},{path:/login,component:Login}]
})export default router
然后我们需要导入那两个页面然后就需要在routes数组中配置页面的路由。path代表路径如果是一个/代表是根目录component是导入时起的名字。两个页面之间用逗号分隔。如果还有其他顶级导航页面也可以继续逗号分隔添加
最后我们在出口页面默认是App.vue文件导入工具import { RouterLink, RouterView } from vue-routerRouterView是以视图显示RouterLink是以链接显示元素部分加上标签RouterView/或RouterLink/是加载配置路由的 二、二级路由设计
二级路由也称为嵌套路由是指在一个路由父路由内部再定义一组路由子路由。这种路由结构允许我们在页面上实现更复杂的层级关系使得页面布局和组织更加灵活和清晰。
层级结构二级路由具有明确的层级关系父路由是子路由的容器。共享路径子路由的路径是相对于父路由的路径而言的它们会共享父路由的路径前缀。独立组件每个二级路由都对应一个独立的Vue组件用于渲染该路由下的页面内容。
比如我们有好多页面的布局是一样的但是内容不一样或者大布局中的小布局不一样时我们就可以利用二级路由实现这一特点。我们可以将布局一样的页面组件都作为布局页面的子路由。
同样为了加以区分我们在两个文件中也加入区分的文字代码我不在赘述。
只需要在父路由中加入children即可
import { createRouter, createWebHistory } from vue-router
import Layout from /views/Layout/index.vue
import Login from /views/Login/index.vue
import Home from /views/home/index.vue
import Exams from /views/exams/index.vue
const router createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path:/,component:Layout,children:[{path:,component:Home},{path:/exams,component:Exams}]},{path:/login,component:Login}]
})export default router
同样需要先导入组件上述代码导入的是home的index组件和exams的index组件。因为我们需要作为布局页面的子路由所以在布局页面配置中加入childrenpath为空字符串代表默认显示这个组件内容
