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

vue路由两种数据类型引用

article 2025/1/10 11:40:53

一、对象
小router.js

export default {
  path: '/meetingminutes/app',
  name: 'app',
  component: () => import('@/views/meetingMinutes/routerView.vue'),
  children: [
    {
      path: '/meetingminutes/list',
      name: 'list',
      component: () => import('@/views/meetingMinutes/list'),
      meta: {
        title: ''
      }
    },]
}

routerView.vue

<template>
    <div class="meetingMinutes">
        <div class="fir">
            <div class="firImbBox">
                <img class="img" src="@/views/meetingMinutes/imgs/PC-logo@2x.png" alt="">
            </div>
            <div class="text"></div>
        </div>
      <router-view  />
    </div>
  </template>

总router.js

import meetingMinutes from "@/views/meetingMinutes/router.js"

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/IntelligentQuery')
  },
 meetingMinutes 
]```
二、数组
小router.js

```javascript

var arr = [{
    path: '/meetBook/meetView',
    name: 'meetView',
    component: () => import('@/views/MeetBook/MeetView.vue'),
    meta: {
      title: ''
    }
  },
  {
    path: '/meetBook/listReservation',
    name: 'listReservation',
    component: () => import('@/views/MeetBook/list-reservation.vue'),
    meta: {
      title: ''
    }
  },
  ]
  export default arr

总router.js

import meetbook from "@/views/MeetBook/router.js"
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/IntelligentQuery')
  },
 ...meetbook 
]``