vue3 路由

vue3项目 vue cli

首先保证项目中引入了 

package.json  文件内

 

其次路由文件 router.js　　内

 

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"//123
import page404 from "../views/404.vue"
import Home from "../views/home.vue"
const routes: Array<RouteRecordRaw> = [ //32
  {
    path: "/",
    name: "Home",
    component: Home,
    redirect: "/index",
    children: [
      {
        path: "/index",
        name: "Index",
        meta: {
          istoken: "首页"
        },
        component: () => import("@/views/index/index.vue")
      },
      {
        path: "/about",
        name: "About",
        meta: {
          istoken: "关于"
        },
        component: () => import("@/views/about/about.vue"),
        redirect: "/about/groupIntroduction",
        children: [
          {
            path: "/about/groupIntroduction",
            name: "GroupIntroduction",
            meta: {
              text: "集团介绍"
            },
            component: () => import("@/views/about/groupIntroduction.vue")
          },
          
        ]
      },
      
      
    ]
  },
  { path: "/404", component: page404 },
  { path: "/:catchAll(.*)", redirect: "/404" },
  { path: '/news/newsDetail', name: 'NewsDetail',component: () => import("@/views/news/newsDetail.vue")},
  { path: '/contact/juxianAccepted/recruitmentDetail', name: 'RecruitmentDetail', component: () => import("@/views/contact/juxianAccepted/recruitmentDetail.vue")}
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
router.afterEach((to,from,next) => {
  window.scrollTo(0,0);
});
export default router

然后是获取所有路由名称路径的文件

<template>
  <div class="home">
    <page-top :home-title="routers" class="top"></page-top>
    <div class="body">
      <router-view></router-view>
    </div>
    <page-bottom :home-title="routers"></page-bottom>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import PageTop from "@/components/PageTop.vue";
import PageBottom from "@/components/PageBottom.vue";
import { useRoute, useRouter } from "vue-router"

export default defineComponent({
  components: { PageTop, PageBottom },
  setup() {
    // 获取路由操作
    const router = useRouter()
    const route = useRoute()
    const currentRoute = "/" + route.path.split("/")[1]     //获取页面当前路径
    
    // router.options.routes  === 路由文件里面的路由数组
    // router.options.routes.filter(i => i.path === "/")[0]    === 通过filter里面的条件，过滤出一个新的数组，

    // ==== 通过多次的filter过滤，返回新数组，拿到所需要的嵌套路由内的后代的数组
    // router.options.routes.filter(i => i.path === "/")[0].children.filter(i => i.path === currentRoute)[0].children
    
    const routers = router.options.routes.filter(i => i.path === "/")[0].children   //此处是获取传到网站顶部和底部tabbar的数组
    return { routers };
  },
});
</script>

<style lang="scss" scoped>
.body {
  min-height: 300px;
  margin-top: 80px;
}
.top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 80px;
  background: #fff;
}
</style>

 

 

现在 return 出的 routers 已经是过滤好的路径数组，

传到需要使用的地方就可以使用了