VUE项目搭建之路由篇

文件目录创建

如果对创建文件目录有自己的看法，可以跳过这小节，直接看路由部分。我这部分只是为了给工作经验并不是很足的同学们一些建议。

1. 前两章已经搭建好了基础的vue脚手架部分，现在就开始项目文件目录创建部分的吧，如何清晰的配置各文件目录部分。新建出来的项目里面我们打开src文件夹，可以看到如下几个文件：
   
   当然了，这几个文件肯定是满足不了我们项目需求的，所以准备自己动手继续创建吧。

（1）首先我们创建一个静态资源的文件static，此文件夹下存放的静态资源是不会被webpack打包处理掉的，所以我们一般都会放图片，引入的css或者JS之类的东西，记住，这个static文件夹是不会被打包的。
（2）然后我们进入src中看到assets文件夹，这个文件夹是会被webpack打包的，所以，如果我们项目需要的一些css就可以放进这里面。
（3）components文件夹是用来放置组件部分的，你所封装的组件都可以存放此文件夹（PS：组件命名需规范，如弹框，表格，多级联动之类的英文名，其次就是组件部分封装之后，必须要有使用代码示例，各个参数配置，注释必须清楚，否则，你的组件过阵子估计你自己都能忘了怎么用，只能重新看。我刚开始也是这样子。。。懒得写注释。。）
（4）router文件夹：这个文件夹就是专门存放路由的，所有页面组件都可以通过这个文件去查找。（等会重点讲）
（5）store文件夹：一般都是存放共享数据的，也就是vuex。但因为vuex这个是全局的，所以一般小项目，能不用就不用了，缓存和组件通信几乎都可以完成了。
（6）view文件夹：这个文件夹就是存放所有页面组件的文件夹了，你写的所有页面都是放置在这个文件夹中的。

好了，上面是脚手架已经创建好的，下面，还要我们自己去创建需要的文件。
（7）比如说我们的项目肯定是有请求的吧，所以，建立新的https的文件夹，一眼就可以看出这个文件夹是放置请求的。
（8）另外，我们一个项目中可能是有很多的重复方法，这些方法不可能每个页面都得写一遍吧，所以，我们需要一个存放公共方法的文件夹，命名为publicMthods
（9）在一个项目中，最最常见的应该就是一些下拉框，单选，多选之类的东西，但是下拉框里面的选项有可能是后端返回给你的，也有很大一部分有可能是静态的，但是这些东西产品自己肯定都不敢确认不会改，但是，我们如果每个页面都有那个下拉框，但是现在产品让我们改需求，现在的你会不会一脸懵逼，或者心里默默问候产品。。。这其实怪不着产品。我们可以建立一个configs的文件夹，里面专门存放一些有不确定因素的配置项。然后可以在publicMethods文件中封装一个可以获取key值的方法，这样，无论编辑还是显示（因为一般后端都是返回value值给你，这个value是个数字，但是你得显示name），你都会非常轻松。【根据value获取name的方法，今天有空今天写，没空的话后续补上。建议你们边写边看，不要直接复制，不然成了copy工程师了】
（10）因为我也说了，我这边也会把多语言添加进项目中，所以肯定少不了新建langs文件夹，此文件夹专为多语言进行配置，语言肯定是不能跟其他的文件混为一谈的。一般我们所用的国际化语言的插件都为i18n，每国的语言对应单独的JS文件即可。至于内部怎么写，那是后话，先搞定路由部分吧。
（11）还有就是现在我们只是前端静态部分，如果后端没出接口的情况下，我们肯定需要自己模拟数据，所以我们可以使用mock.js（没听过的百度下，这个插件就可以模拟数据。），单独建立一个新的文件夹。（一般公司里面后端的进度比前端快一周左右，但是不排除有些公司。。。后端没开始，前端已经开始了的情况，所以我们的模拟数据肯定不能落下了，后期你只需要跟后端协商好需要的数据结构即可）

文件目录及作用差不多就这么多了，当然了还有可能遗漏的地方，但是，这些文件目录已经能够满足一般项目需求了。下面可以开始我们的正戏了！

路由篇（路由配置部分）

在开始我们的路由之前，我们需要知道几个点！
1：路由是控制页面组件的，每个路由的路径都是对应一个页面的（也就是你看到的HTTP的地址）。
2：路由可以控制权限，比如某些页面需要登录后才能够进行观看。
3：路由可以进行页面跳转传参。
4：路由提供了跳转前后的方法。
好了，开始设计路由部分。
打开router文件夹，我们看到只有一个index.js文件，当然了，这个文件我们其实可以写出完整的路由，只是有个缺点，如果你的页面过多的时候，你的页面会非常的长，路由中有你的路由组件，路由的方法等会显得比较杂乱，所以我们可以分开处理，把index.js当成路由主入口文件，新建view.js，这个JS文件只存放页面组件的路由配置。

我们将原本router/index中const = routes的路由部分删除，再在view.js中添加进去，如下图：

注意图二中，这个const的变量必须导出，然后在index.js中导入进去，才可以使用（import 导入，export 导出，具体可以参考ES6语法，不多做解释了。）然后这个导入的参数在vuerouter这个实例中做一个入参放置进去即可。
我们可以看到图一中也导出了实例为router的变量，这个变量，在我们的main.js中也是个入参，只不过是vue实例的入参，不记得的请回看main.js部分。

下面简述一下router中的入参吧。
1：mode：这是选择路由模式的，共有两个参数，history和hash，两者区别为history的路由的路径正常，但是需要后端配合配置，否则就会导致跳转页面发生404的情况，而hash的话，它只是在路径中添加了一个#号，

2：base：只是在页面路径请求之后添加了一个路径，比如你的请求原本是http://localhost:8080，你在base中配置了一个/aaa/，路径就会变成http://localhost:8080/aaa/，自己可以试试看哦。有些后端可能需要你在路由中添加这个配置嘞，所以别忘了这个参数的做用。

3：routes：这个参数就是你的页面路由了。

看一下大致所用参数，如下图：1：path：这就是页面路径地址，只不过这个路径是和请求地址+base配置+path路径，拼成完整的http路径。
比方说你的请求地址：http:localhost:8080
你的base配置为： /admin/
你的path为 /login，
那么你在网址栏输入的地址就是： http:localhost:8080/admin/login
这个路径就能访问到你当前配置出来的页面（也就是component）了
2：name：其实这个并没有什么特别大的意义，如果你需要获取这个name的话，可以对应配置。（目前我还没碰到过获取这个name的情况，所以我一般都是写页面的名字）
3：component：这就是你的页面组件了，看下上图的这里引入了一个home的组件页面（就是你正常画页面的地方了），然后component的值就是这个组件页面。
4：你还可以添加一个meta的对象，这个对象里面你可以添加title标题或者auth权限，如下：

const routes = [
	{
    
    
      path: '/',
      name: 'about',
      component: about,
      meta: {
    
    
      	auth: true, // 路由权限控制，true为有权限，false为不需要权限
      	title: '专门设置的页面标题'
      }
    }
]

简单的路由就这么完成了。

当然了，如果你就这么写的话，估计你的页面打开的时候会一直转啊转的，为什么呢？因为这是单页面的应用，你可以理解成只有一个页面，由很多的小零件组成的，但是这些个零件比较大哦，所以怎么解决呢？这就可以说说路由懒加载了，它是由webpack和vue异步组件实现的。
在比方你需要引入一个about组件的时候，就可以像下面那样：
假如…/views/about是你的相对路径哦

const about= () => import('../views/about')

然后你可以在你的routes中引入进去，如下：

const routes = [
    {
    
    
      path: '/views/about',
      name: 'about',
      component: about
    }
  ]

这样，就可以完成了你的路由啦！

路由篇（路由传参，跳转）

1.先说说路由传参的方式吧，我们一般页面的传参只需要拼接在url上面即可，但是我们的单页面怎么传递呢？
在vue-router中提供了几个传参方式如下：
（1）如果我们是在发生了页面跳转的时候（点击跳转或者完成了某个操作之类的跳转）可以如下传参：
第一步：我们需要在view.js的路由中找到跳转的页面添加参数如下：

第二步，我们在跳转的时候传入需要的参数，如下：

let id = 110
this.$router.push({
    
    
  path: `/about/${
      
      id}`, // 跳转进about页面之后url会变成 /about/110
})

第三步：既然我们跳转about页面传递了个ID，那我们怎么获取呢？我们可以直接在about页面中获取如下：

let getId = this.$route.params.id

至于页面的跳转，可以照上面的方式跳转，当然，也可以使用标签：

<router-link to="/about">Home</router-link> |

这样跳转，也很方便的哦，看自己需求选择吧。
好啦，这样就完成了页面跳转及传参了，当然了，传参这是其中的一两个个方式而已，你也可以上官网看看其他的跳转方式以及传参方式，不过多赘述了。

好咯，今天先就这么多吧，自己可以动手试试看了，至于路由拦截部分（含权限），由于内容比较多，暂时就不放在一起去说了，以免内容太多导致无法消化了。我这边会单独再讲解一篇。

（PS：我这边举例的是后台管理的搭建哦，因为后台系统概括的还是比较全的，如果喜欢可以点个关注哦，完整项目搭建，感谢支持，如发现错误可以联系博主。原创不易，谢谢！）