Vue 路由应用总结
在用脚手架创建的项目中，需要在该项目中使用vue add router命令添加路由插件。这是实现路由功能的前提。
一般情形下，涉及到的路由模式有：hash方式和history api的方式。默认模式是hash，在url中（即网址中）会有#号出现，但实际应用过程中，通常使用的是history 的方式，所以，在路由配置的js文件中会明确的去设置路由的模式： mode: 'history' 。
路由的应用一般有动态路由、嵌套路由、命名路由、导航守卫几种形式。无论那种形式，都是在基础的路由上进行的变化和深入。所以，掌握总体路由创建的思路是学好路由的关键。
路由创建的总体步骤：
- 首先要规划好在一个页面中有哪些路由即有哪些链接，这些链接对应的页面是谁，在这些链接的页面中是否还有路由去创建。
- 创建路由对应的页面组件，在vue脚手架创建的项目中的组件的扩展名是.vue，在创建组件时，其名字命名一般使用大驼峰的形式，例如：UserView.vue 。该组件内由三部分组成： ，，，在它们的标志内分别书写html代码、JavaScript代码、css样式代码，即代码不会相互掺杂。
3.在项目的入口文件main.js中去获取路由文件所在的位置，在该文件中进行路由的配置。实际上路由的配置过程就是将url中的路径与要显示的组件的进行映射。路由中包含三个部分的设置：
由上图可知，路由配置文件为index.js
每个路由都是一个对象，该对象主要包括三个熟悉：
- path：表示指向的路径，也是超链接中要与服务器的根地址组合，最后成为浏览器中的URL。
- name：是指代当前定义的这个路由的名字，很多情形下，如果path的路径字符过长，可以使用name来表示，也即命名路由。
- component：path路径对应的组件，也就是当点击path代表的超链接时，跳转到的目的页面，由此也说明了，定义路由其实就是定义路径和显示组件的映射。
还可以看到，每条路由都位于一个数组叫routes变量中，该数组是生成路由对象的参数。
- 在使用路由的组件的 中设置超链接。
设置超链接是用两个标签:
使用npm run serve 运行，即可在浏览器中展示。
各个页面的关系图：
动态路由：冒号是标志，在路由定义中，冒号后的部分是要发生变化的，虽然发生变化，但生所有的变化后对应的内容所在的组件是不变的。
嵌套路由：就是在路由对应的页面中，还有路由去进行更进一步，更深层次的页面展示。其标志是在一个路由定义中，使用children:[ ]去定义子路由，只是要清楚地是，路由的path对应的路径不需要和其父路由那样写全，因为类似继承的关系，子路由的path的路径默认是要加上父路由的路径的。
命名路由：在router-link的属性to后的内容不使用path的内容而是使用name的内容，同时在使用过程中，注意to前要进行v-on的绑定，也可以直接使用冒号（v-on的语法糖），即 :to ，而且，可能还需要进行参数的传递，所以，to后的内容是一个对象的形式，即使用{ }来承载设置。
运行界面：
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/39943.html