如何使用？？？？

直接复制到vue项目main.js里面，改引入组件名称，路由地址跟组件地址
// 引入插件
import VueRouter from "vue-router"
// 使用路由插件
Vue.use(VueRouter)
//! 冗余导航错误： 通过编程时导航连续跳转到相同的路由时会触发。 （不会影响正常代码的执行）
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
// 引入视图组件
import Find from "./views/Find.vue"
import My from "./views/My.vue"
import Part from "./views/Part.vue"
import NotFound from "./views/NotFound.vue"
// 引入子组件
import Recommend from "./views/second/Recommend.vue"
import Ranking from "./views/second/Ranking.vue"
import SongList from "./views/second/SongList.vue"

// 注册路由规则
const routes = [
    // 路由重定向---从一个路由自动定向跳转到另一个路由
    {
        path: "/", //默认根路径
        redirect: "/find", //重定向属性
        /* 
    实际应用
       1.当某个理由在使用过程中废弃掉，可以通过重定向将原本的路由地址重定向到新地址上
       2.当满足一定条件（如：登录信息过期，第一次进入页面时访问的是跟路由），可以重定向到某个新路由地址中
    */
    },
    {
        path: "/find", //组件名称应该和路由是相同的一般用大小写区分
        name: "Find",
        component: Find, //组件名称
        children: [
            //当前路由的子路由
            {
                path: "recommend", //子路由为了方便与父路由区分可以不写  /
                name: "Recommend",
                component: Recommend,
            },
            {
                path: "ranking",
                name: "Ranking",
                component: Ranking,
            },
            {
                path: "songList",
                name: "SongList",
                component: SongList,
            },
        ],
    },
    {
        path: "/my",
        name: "My",
        component: My,
    },
    {
        path: "/part",
        name: "Part",
        component: Part,
    },
    {
        path: "/part/:username",
        component: Part,
    },
    // 当用户输入的路由地址不在路由规则中时，专门设置一个404页面提示
    {
        path: "*",
        component: NotFound,
    },
]
// 创建路由实例对象，并传入规则
const router = new VueRouter({
    routes,
})
/* 
  使用场景： 当需要对路由跳转进行权限控制时，就需要用到
  语法： beforeEach((to, from, next) => { 在路由跳转之前，执行的函数逻辑，通过逻辑分析决定是否进行跳转（跳转到哪里） })
  to: 要跳转到的目标路由地址 （目标）
  from: 从那个路由跳转过来的 （来源）
  next: next是一个函数， 确定路由的跳转方式
    next() / next(true) => 正常跳转(跳转到to表示的路由地址中)
    next(false) => 留在当前路由（留在from中）
    next('路由path') => 强制修改跳转路由的目标地址
  如果函数执行体中，没有写next(), 那么等同于 next(false)
*/
router.beforeEach((to, from, next) => {
    console.log("to:", to)
    console.log("from:", from)
    if (to.path === "/my") {
        // next(false) //留在当前路由（留在from中）
        next("/find") //强制修改跳转路由的目标地址
    } else {
        next()
    }
})
new Vue({
    // vue使用路由
    router,
    render: h => h(App),
}).$mount("#app")
vue路由规则配置公式

如何使用？？？？
