vue3子页面创建及使用

import { createRouter, createWebHashHistory } from "vue-router";
// 引入文件
import Home from "../views/Home.vue";
import About from "../views/About.vue";
import Attach from "../views/Attach.vue";
// import Sy from "../views/Sy.vue";
import Cs from "../views/Cs.vue";
const routes = [
  {
    path: "/Attach",
    redirect: Attach,
  },
  {
    path: "/home",      //假如home为登录页面
    name: "home",
    component: Home,
  },
  {
    path: "/",
    name: "About",      //为首页
    component: About,
    children: [         //子页面
      {
        path: "/",
        name: "Attach",
        component: Attach,
      },
      {
        path: "/Cs",
        name: "Cs",
        component: Cs,
      },
      {
        path: "/sy",
        name: "sy",
        component: sy,
      }
    ],
  },
];
const router = createRouter({
  routes,
  history: createWebHashHistory(),
});

<template>
  <div>
    <div>
      <p>侧面菜单</p>
    </div>
    <div>
      <p>面包屑</p>
    </div>
    <div>
      <p><router-view></router-view></p>
    </div>
  </div>
</template>

<template>
    <div>
        <p>测试</p>        
    </div>
</template>

<template>
  <div>
    <p>首页</p>
  </div>
</template>

<template>
  <div>
    <div>
      <p>侧面菜单</p>
    </div>
    <div>
      <p>面包屑</p>
    </div>
    <div>
      <p><router-view></router-view></p>
    </div>
  </div>
</template>

<template>
  <div>
    <div>
      <p>侧面菜单</p>
    </div>
    <div>
      <p @click="isHref">面包屑</p>
    </div>
    <div>
      <p><router-view></router-view></p>
    </div>
  </div>
</template>
<script setup>
// import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const isHref = (url) => {
  router.push({ name: "cs" });
};
</script>

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});
// const touye = new vueRourter({...})
router.beforeEach((to, from, next) => {
  // to当前路由信息
  let scienceid = sessionStorage.getItem("scienceid");    //这是我们登录时存到本地里面
  if (to.name != "home") {      //判断当前页面如果不是登录页面
    if (scienceid) {            //是的话判断如果本地有值的话就可以执行下个页面
      next();                  
    } else {
      router.replace("home");   //没有的话强制返回登录页面
    }
  } else {                      //当是登录页面的话
    if (scienceid) {            //并且本地里面有值的话触发子页面
      router.replace("/");      //这个‘/’页面是子页面的主页
    } else {                    //如果本地里面没有数据可以单击跳转其他页面
      next();
    }
  }
});
export default router;