第三十三章 Vue路由进阶路由模块封装

目录

一、引言

二、完整代码

main.js

index.js 

App.vue

Find.vue

My.vue

一、引言

在上一个章节中，我们将所有的路由配置都堆在main.js中来实现路径组件的路由，这样做的话非常不利于我们后期对项目的维护。因此正确的做法是将路由模块抽离出来，拆分模块，更利于维护和扩展。

main.js拆分后的效果图：

我们新建了一个router路径，并将抽离出来的路由配置存放于index.js中，并在main.js中导入，以此简化了main.js的代码，增强代码的维护性。 

二、完整代码

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

index.js 

// @代表根路径/src
// .代表当前文件平级的路径
// ..代表上级路径
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  // routes 路由规则们
  // route  一条路由规则 { path: 路径, component: 组件 }
  // 由/替换#来更改路径的风格，这涉及到Nginx中的配置
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },
  ]
})

// 导出路由配置，并在main.js中import导入该路由配置
export default router

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
.footer_wrap {
  position: relative;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
</style>

Find.vue

<template>
  <div>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
    <p>发现音乐</p>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>

</style>

Friend.vue

<template>
  <div>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
    <p>我的朋友</p>
  </div>
</template>

<script>
export default {
  name: 'MyFriend'
}
</script>

<style>

</style>

My.vue

<template>
  <div>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
    <p>我的音乐</p>
  </div>
</template>

<script>
export default {
  // 给组件定义一个多单词名字，避免ESLint校验时抛出组件单个单词命名的校验异常
  name: 'MyMusic'
}
</script>

<style>

</style>