vue 脚手架项目路由总结（比较详细的介绍应用和各文件的关系）

Vue 路由应用总结

在用脚手架创建的项目中，需要在该项目中使用vue add router命令添加路由插件。这是实现路由功能的前提。

一般情形下，涉及到的路由模式有：hash方式和history api的方式。默认模式是hash，在url中（即网址中）会有#号出现，但实际应用过程中，通常使用的是history 的方式，所以，在路由配置的js文件中会明确的去设置路由的模式：  mode: 'history' 。

路由的应用一般有动态路由、嵌套路由、命名路由、导航守卫几种形式。无论那种形式，都是在基础的路由上进行的变化和深入。所以，掌握总体路由创建的思路是学好路由的关键。

路由创建的总体步骤：

1. 首先要规划好在一个页面中有哪些路由即有哪些链接，这些链接对应的页面是谁，在这些链接的页面中是否还有路由去创建。
2. 创建路由对应的页面组件，在vue脚手架创建的项目中的组件的扩展名是.vue，在创建组件时，其名字命名一般使用大驼峰的形式，例如：UserView.vue 。该组件内由三部分组成：<template></template>，<script></script>，<style></style>，在它们的标志内分别书写html代码、JavaScript代码、css样式代码，即代码不会相互掺杂。

    3.在项目的入口文件main.js中去获取路由文件所在的位置，在该文件中进行路由的配置。实际上路由的配置过程就是将url中的路径与要显示的组件的进行映射。路由中包含三个部分的设置：

由上图可知，路由配置文件为index.js

每个路由都是一个对象，该对象主要包括三个熟悉：

1. path：表示指向的路径，也是超链接中要与服务器的根地址组合，最后成为浏览器中的URL。
2. name：是指代当前定义的这个路由的名字，很多情形下，如果path的路径字符过长，可以使用name来表示，也即命名路由。
3. component：path路径对应的组件，也就是当点击path代表的超链接时，跳转到的目的页面，由此也说明了，定义路由其实就是定义路径和显示组件的映射。

还可以看到，每条路由都位于一个数组叫routes变量中，该数组是生成路由对象的参数。

1. 在使用路由的组件的<template></template>中设置超链接。

设置超链接是用两个标签:

1.router-link：该标签设置的超链接的形式，其中它的to属性就是路由中的path或name的内容。
2.router-view：是指当点击由router-link设置的超链接时，其对应的组件（路由定义中component属性的值）要在当前页面中显示的位置。

使用npm run serve 运行，即可在浏览器中展示。

各个页面的关系图：

动态路由：冒号是标志，在路由定义中，冒号后的部分是要发生变化的，虽然发生变化，但生所有的变化后对应的内容所在的组件是不变的。

嵌套路由：就是在路由对应的页面中，还有路由去进行更进一步，更深层次的页面展示。其标志是在一个路由定义中，使用children:[ ]去定义子路由，只是要清楚地是，路由的path对应的路径不需要和其父路由那样写全，因为类似继承的关系，子路由的path的路径默认是要加上父路由的路径的。

命名路由：在router-link的属性to后的内容不使用path的内容而是使用name的内容，同时在使用过程中，注意to前要进行v-on的绑定，也可以直接使用冒号（v-on的语法糖），即 :to ，而且，可能还需要进行参数的传递，所以，to后的内容是一个对象的形式，即使用{ }来承载设置。

运行界面：