导航二级路由设置

导航二级路由--网易云

一、二级路由

1.创建跳转文件src/view文件夹内，并创建二级跳转文件夹src/view/second

ranking.vue // 排行榜 
recommend.vue // 推荐
my.vue // 我的音乐
find.vue  // 发现音乐

2.在src/router/index.js中，引入并配置路由

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    redirect: "/find",
  },
  {
    path: "/find",
    component: () => import("@/views/find.vue"),
    children: [
      {
        path: "recommend",
        component: () => import("@/views/second/recommend.vue"),
      },
      {
        path: "ranking",
        component: () => import("@/views/second/ranking.vue"),
      },
    ],
  },
  {
    path: "/my",
    component: () => import("@/views/my.vue"),
  },
];

const router = new VueRouter({
  routes: routes,
});

export default router;

3.App.vue中，引入以及一级挂载点

<template>
  <div>
    <div>
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
    </div>
    <!-- 设置一级路由挂载点 -->
    <router-view></router-view>
  </div>
</template>

4.find.vue中，引入以及二级挂载点

<template>
  <div>
    <div>
      <router-link to="/find/recommend">推荐</router-link>
      <router-link to="/find/ranking">排行榜</router-link>
    </div>
    <!-- 设置二级挂载点 -->
    <router-view></router-view>
  </div>
</template>