1. 路由基础配置

• router/index.ts:路由器配置

  import { createRouter, createWebHistory } from "vue-router";
  //引入路由表
  import routes from "./routes";
  //创建路由器
  const router = createRouter({
    //history模式
    history: createWebHistory(),
    routes: routes,
    //每次路由跳转后的滚动条位置
    scrollBehavior(to, from, savedPosition) {
      // 始终滚动到顶部
      return { top: 0 };
    },
  });
  
  export default router;

• router/routes.ts

  import { RouteRecordRaw } from "vue-router";
  const routes: RouteRecordRaw[] = [
    {
      path: "/home",
      component: () => import("@/views/Home/index.vue"),
    },
    {
      path: "/about",
      component: () => import("@/views/About/index.vue"),
    },
  ];
  export default routes;

• 入口文件中使用路由器

  import { createApp } from "vue";
  import App from "@/App.vue";
  import router from "@/router";
  
  createApp(App).use(router).mount("#app");

• 声明式路由导航

  //这种写法是因为在setup中默认引入了RouterLink
  <RouterLink to="/home">home</RouterLink>
  或者
  <router-link to="/home">home</router-link>

• 路由展示区域

  //这种写法是因为在setup中默认引入了RouterView
  <RouterView></RouterView>
  或者
  <route-view></route-view>

2. 配置二级路由

配置二级路由表和二级路由视图及导航

【注意!!】配置重定向路由的时候,需要写全路径

const routes: RouteRecordRaw[] = [
  {
    path: "/home",
    component: () => import("@/views/Home/index.vue"),
    children: [
      {
        path: "music",
        component: () => import("@/views/Home/Music/index.vue"),
      },
      {
        path: "news",
        component: () => import("@/views/Home/News/index.vue"),
      },
      {
        path: "/home",
        redirect: "/home/music",
      },
    ],
  },
  {
    path: "/about",
    component: () => import("@/views/About/index.vue"),
  },
];

3. 三级路由的配置

给 music 配置三级路由

const routes: RouteRecordRaw[] = [
  {
    path: "/home",
    component: () => import("@/views/Home/index.vue"),
    children: [
      {
        path: "music",
        component: () => import("@/views/Home/Music/index.vue"),
        children: [
          {
            path: "item",
            component: () => import("@/views/Home/Music/Item/index.vue"),
          },
        ],
      },
      {
        path: "news",
        component: () => import("@/views/Home/News/index.vue"),
      },
      {
        path: "/home",
        redirect: "/home/music",
      },
    ],
  },
  {
    path: "/about",
    component: () => import("@/views/About/index.vue"),
  },
];

<template>
  <h3>Music视图</h3>
  <router-link to="/home/music/item">周杰伦</router-link>
  <router-link to="/home/music/item">毛不易</router-link>
  <router-link to="/home/music/item">林俊杰</router-link>

  <router-view></router-view>
</template>

4. 路由传值

• 可以使用 params 和 query 传值

  <router-link to="/home/music/item/周杰伦?msg=稻香">周杰伦</router-link>
  <router-link to="/home/music/item/毛不易?msg=消愁">毛不易</router-link>
  <router-link to="/home/music/item/林俊杰?msg=一千年以后">林俊杰</router-link>

• 可以使用 useRoute 方法接收传值

  //setup中
  import { useRoute } from "vue-router";
  const route = useRoute();

  //模板中
  <ul>
      <li>{{ route.params.name }}</li>
      <li>{{ route.query.msg }}</li>
  </ul>

5. 编程式路由导航

• 使用 useRouter 方法得到 router 路由器对象

  import { useRouter } from "vue-router";
  const router = useRouter();

• 编程式路由导航

  <button @click="router.push('/home/music/item/周杰伦?msg=稻香')">
      周杰伦
  </button>
  <button @click="router.push('/home/music/item/毛不易?msg=消愁')">
      毛不易
  </button>
  <button @click="router.push('/home/music/item/林俊杰?msg=一千年以后')">
      林俊杰
  </button>