目录
一、引言
二、完整代码
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 = falsenew 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>