当前位置：首页 > article >正文

vue一级、二级路由设计

article 2024/11/15 13:43:41

一、一级路由设计

一级路由是指直接映射到应用程序中顶级页面或组件的路由。这些路由通常定义在Vue Router的配置中，作为应用程序导航结构的基础。

直接映射：一级路由直接映射到URL路径和Vue组件，没有嵌套关系。
顶级导航：它们通常用于应用程序的顶级导航，如首页、关于页面、用户中心等。
配置简单：在Vue Router的配置文件中，一级路由的配置相对简单，只需指定路径和组件即可。

比如我们有两个页面，一个是登录页面，一个是布局页面，都是顶级导航，那么这个时候我们就需要一级路由设计

为了加以区分，我们现在两个页面上输入点字

布局页面:

<script setup>

</script>
<template>
    <div>
        我的布局页面
        
    </div>
</template>
<style scope></style>

登录页面：

<script setup>

</script>
<template>
    <div>
        我的登录页面
    </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-router'，RouterView是以视图显示，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组件。因为我们需要作为布局页面的子路由，所以在布局页面配置中加入children，path为空字符串代表默认显示这个组件内容

查看全文

http://www.kler.cn/a/315035.html