【vue3仿网易云音乐app】音乐app路由解析

最新推荐文章于 2025-05-20 09:22:06 发布

EVELESLIE

最新推荐文章于 2025-05-20 09:22:06 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js webpack

本文链接：https://blog.youkuaiyun.com/EVELESLIE/article/details/129343151

文章介绍了Vue.js应用中如何在App.vue中使用vue-router，包括路由占位符、全局注册router-link和router-view。重点讨论了路由懒加载的实现，通过ES6的import方式和vue异步组件加载、webpack的require.ensure()。此外，还阐述了路由守卫的概念，如全局守卫和单个路由独享守卫，用于实现权限控制。文章以一个具体示例展示了如何设置单个路由独享守卫，判断用户登录状态来决定路由跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

App.vue中，使用vue-router路由占位符来进行占位。使用vue.use方法的时候会自动全局注册router-link 和router-view，所以不需要在components中进行导入

<template>
  <div>
    <router-view/>
    <play-controller></play-controller>
  </div>
 
</template>
<script>
import playController from '@/components/playController.vue'
export default {
  components:{
    playController
  },
  mounted(){
    let userData = JSON.parse(localStorage.userData);
    this.$store.commit('setUser',userData);
  }
}
</script>

有router-view引申到router/index.js文件
在这里插入图片描述

使用es6中的import方式进行了路由懒加载

路由懒加载指的是按需加载路由，即用到才加载。因为vue是一个单页页面，如果全部进行即时加载的话，初始的loading时间会很长，没有用户体验。使用路由懒加载的方式可以分成几个小块组件，延时加载。

  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },

路由懒加载有三种方式，除了本项目中用到的ES6 import之外，还有vue异步组件加载和webpack的require，ensure()加载。
异步组件加载：

  { 
   
    path: '/about',
    name: 'about',
      component: resolve => require(['../views/AboutView.vue'], resolve)
    }

webpack：

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{ 

require.ensure(['@/components/HelloWorld'],()=>{ 

resolve(require('@/components/HelloWorld'))
})
}
Vue.use('Router')
export default new Router({ 

routes:[{ 

{ 
path:'./',
name:'HelloWorld',
component:HelloWorld
}
}]
})

除了路由懒加载，

路由部分还涉及到了路由守卫.

路由守卫就是鉴权，判断用户该操作有没有权限，有权限就允许跳转路由，没有就拒绝跳转。
路由守卫分为三种：

全局守卫（全局前置、全局后置）
单个路由独享守卫
组件内守卫
本项目中使用的是单个路由独享守卫，在我的主页中配置路由守卫，判断用户是否登录，登陆的话进入next()继续下一个钩子，否则进入登陆页进行登录

  {
    path: '/me',
    name: 'me',
    beforeEnter:(to,from,next)=>{
      if(store.state.user.isLogin){
        next()
      }
      else{
        next("/login")
      }


    },
    // 路由守卫
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Me.vue')
  }

最后将配置项数组传给createRouter方法，它会根据配置项返回创建好的router

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

接着将此对象导出，这样在main.js中就可以直接使用了

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app') //应用实例挂载的整个组件树共享同一个上下文