Vue最新路由方法搭建详细过程

因为本人学后端比较多，然后再学前端可能基础不是很好。我学vue总共学习了2个视频，第一个是用的vue2.0版本，主要是做一个app，整体来说理解还可以，第二个因为我要写一个项目的后台，于是又用到了vue+element-ui。这回用的是vue3.0改变对我来说还是有那么一点大，我感觉2.0版本的路由清晰一点，vue3.0版本的路由在2.0之上又封装了一遍。我问了vue方面的老师的同学们，他们都说3.0版本封装更好了(可能是我太菜了)。后面我看了一遍vue3.0的视频，才领悟到一些。所以就写了这篇博客，以便自己后面忘了再多看几遍。

回顾vue2.0路由

这个是我vue2.0学习的一个项目，路由的结构还是十分的清晰明了。但是vue3.0在之上又封装了一遍，开始我用3.0的时候并不知道封装了，只是感觉不一样了，原因还是自己太菜了，哈哈。

vue3.0路由

一、路由安装

1、安装vue-router
命令：npm install vue-router --save

2、在src中新建一个router.js

3、在main.js引入router.js

二、路由较少页面运用

views就是我们用来存放页面视图的文件，components是用来存放组件的文件。我们在view下面创建了一个主目录layout，然后添加layout的路由，当然这还没有完成，还需要在APP.vue中引入

然后就成功了：

这是登录页面的路由：

路由子页面的路由：

注意如果引入子页面还需要在父页面中添加，这样才会显示。

注意访问的路径:

现在就成功访问了。

三、路由较多页面运用

上面路由的添加只是在页面较少的时候那样可以添加，但是当我们项目页面越来越多的时候怎么办，如果我们需要100个页面，我们就要引入100个页面，那样的工程量是非常大的也是非常的麻烦，非常不利于我们项目的管理。为了后期的管理，所以我们就可以将它分离出来。
1、首先我们在src下创建一个common的文件，里面储存全局文件，然后再创建一个config文件，里面储存配置文件，再创建一个router.js文件，里面就放置全局的路由文件。


注意路径的配置，不要出错。
然后再router.js的文件中引入刚刚的全局路由配置文件：

2、上面路由就大致完成了，但是还有自动生成路由，这样就又简化了我们代码的配置。在router.js中继续添加以下代码。

//获取路由信息方法
let getRoutes = function(){
	//生成路由详细信息
	createRoute(routes)
	return routes
}
//自动生成路由
function createRoute(arr) {
	for (let i = 0;i < arr.length; i++){
		if(!arr[i].component) return
		//去除index
		let val = getValue(arr[i].component)
		//生成name
		arr[i].name = arr[i].name || val.replace(/\//g,'_')
		//生成path
		arr[i].path = arr[i].path || '/'+ val
		
		//自动生成component
		var component = arr[i].component
		// let componentFun = import('../../views/${arr[i].component}.vue')  //不能识别
		let componentFun = import('../../views/'+ component +'.vue')
		arr[i].component = ()=>componentFun
		if (arr[i].children && arr[i].children.length > 0) {
			createRoute(arr[i].children)
		}
	}
}
//去除index
function getValue (str) {
	//str = login/index
	//获取最后一个/的索引
	let index = str.lastIndexOf('/')
	//获取最后一个/后面的值
	var val = str.substring(index+1,str.length)
	//判断是不是index结尾
	if (val === 'index') {
		return str.substring(index,-1)
	}
	return str
}

注意的是这里需要修改：

这样我们就不用配置path和name了，自动可以生成。