路由综合运用

页面导航

.创建项目

.创建SFC

.创建路由

routes: [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {title: "home"}
  },
  {
    path: '/home',
    redirect: '/',
    meta: {title: "home"}
  },
  {
    path: '/team',
    name: 'team',
    component: () => import('../components/sub_view/Team.vue'),
    meta: {title: "team"}
  },
  {
    path: '/work',
    name: 'work',
    component: () => import('../components/sub_view/Work.vue'),
    meta: {title: "work"}
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../components/sub_view/About.vue'),
    meta: {title: "about"}
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../components/NotFound.vue'),
    meta: {title: "404"}
  }
]

routes: [
  {
    path: '/',
    name: 'login',
    component: Login,
  },
  {
    path: '/login',
    redirect: '/'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/Home.vue'),
    children: [
      {
        path: 'user',
        name: 'user',
        component: () => import('../views/User.vue')
      },
      {
        path: 'good',
        name: 'good',
        component: () => import('../views/Good.vue')
      },
      {
        path: 'cart',
        name: 'cart',
        component: () => import('../views/Cart.vue')
      },
      {
        path: 'order',
        name: 'order',
        component: () => import('../views/Order.vue')
      },
      {
        path: 'todo',
        name: 'todo',
        component: () => import('../views/Todo.vue')
      },
      {
        path: 'setup',
        name: 'setup',
        component: () => import('../views/Setup.vue')
      },
      {
        path: 'about',
        name: 'about',
        component: () => import('../views/About.vue')
      }
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../components/NotFound.vue')
  }
]

.创建组件 Breadcrumb.vue

.引入路由

import { useRoute } from 'vue-router';
const route = useRoute();

.使用路由

<div class="bread">
<router-link v-for="(item, index) in route.matched" :key="index" :to="item.path">{{ item.name }}</router-link>
</div>

.仅仅使用路由信息渲染面包屑

<div class="bread">
<div v-for="(item, index) in route.matched" :key="index">{{ item.name }}</div>
</div>

.样式 - 略

.使用组件 - 在父组件中使用；略

现场验收、课后提交实验报告