Vue最佳实战系列(一)：设计一个回味无穷的高扩展性路由，比意大利面香【详解+实践贴上代码】

本文链接：https://blog.csdn.net/A_hxy/article/details/111087873

在接触Vue的过程中，总能令我惊喜，却也因不够老练而带来了让人耗时的bug；但都一一过五关，斩六将，胜在好用且好玩。

所以我想跟你一起拆Vue这堵墙，再把它重新搭建的更好！

这也是我准备写 最佳Vue开发实战系列 的理由。

还等什么？一键三连码起！
在这里插入图片描述

一、什么是高扩展性路由？

与其问什么是高扩展性路由，其实更应该问的是为什么要高扩展性路由？

其实很简单！

当你做一个项目并且不断迭代想走得更远，那么就只有两个字讲究！

什么样的讲究呢？

就是能根据页面展示结构进行抽象，结合业务模块进行的合理层级划分。

总结起来就是，要有区分、要规划，要分门别类且规范。

不会别人看你代码或者体验你的网站就只留下一道菜名。

意大利面。
在这里插入图片描述
好了，言归正传。

先品效果图，一个简约的实践。

（如果你是想实践项目，在这个基础上开始也是可以的）

不过且慢，这里还是要提醒一下可能比较迷糊的小伙伴，记得安装vue-router，否则是玩不起来的，因为vue的路由基于vue-router，所以还没安装的小伙伴，网上有很多详细的安装教程，这里就不再赘述啦。

二、效果图

访问 /user 路由
在这里插入图片描述

访问 /user/login 路由（这里访问根/路由会直接访问 /user/login ）
在这里插入图片描述

访问 /user/Register 路由

2.2特别福利

加入了好看有意思的加载进度条（类似youtube、csdn网站也有的进度条插件），可以改自己喜欢的颜色。

记得安装nprogress，还有导入nprogress.css哦（网上有很多详细的安装教程，这里就不再赘述啦）
在这里插入图片描述
访问不存在的路由会有404提醒

在这里插入图片描述

三、关键代码

router.js

router.js父级user路由这里用简洁的方式render函数，就不用render再写一个单文件路由出口。

{render: h=>h("router-view")}

import()代码里添加注释webpackChunkName告诉webpack打包后的chunk的名称（注释里的内容不能省掉），打包以后的name就是user。

异步加载后会被webpack分包，也就是合并包的作用。

import( /* webpackChunkName: "user" */ '../views/User/Login')

四、贴上完整代码

App.vue

<template>
<div>
<!-- 设置路由导航 -->
<router-link to="/user/login">登陆</router-link>
<router-link to="/user/Register">注册</router-link>
<router-view></router-view>
 </div>
</template>
<style>
#nprogress .bar {
 background: rgb(77, 140, 244) !important;
}
</style>

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/router.js';

Vue.config.productionTip = false;

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

Login.vue

<template>
<div>
     <h2>登录页</h2>
</div>
</template>

Register.vue

<template>
<div>
<h2>注册页</h2>
</div>
</template>

404.vue

<template>
    <div>┗|｀O′|┛ 嗷~~  404</div>
</template>

router.js

import Vue from 'vue';
import Router from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

import NotFound from '../views/404';

Vue.use(Router);

const router =  new Router({
	mode: 'history',
	routes: [
		{path:'/',redirect: '/user/login'},
		{
		path: '/user',
		component: {render: h=>h("router-view")},
		children: [{
				path: 'login',
				name: 'index',
				component: () =>
					import( /* webpackChunkName: "user" */ '../views/User/Login')
			},
			{
				path: 'register',
				name: 'news',
				component: () =>
					import( /* webpackChunkName: "user" */ '../views/User/Register')
			},
			{
				path: '*',
				name: '404',
				component:NotFound
			}
		]
	}]
})

router.beforeEach((to,form,next)=>{
	NProgress.start();
	next();
});

router.afterEach(() => {
	NProgress.done();
});
export default router