hualinux 进阶 vue 3.0： 添加访问路径Vue Router介绍

目录

一、前言

1.1 添加访问路径

1.2 什么是路由

二、Vue router介绍

我们在前面学的vue的两种方式，普通的以<script>标签导入或vue cli安装方式，都是以单页面，只有一个根路径“/”。

在实际网站开发中，我们往往是有多个访问路径的，不同的路径实现不同的显示。vue也有这样的功能，那就是路由route，vue提供相对的插件叫vue router

一、前言

1.1 添加访问路径

我们前面使用的vue都是只有一个主页，而且是单路径的，访问路径为“/”，如果我们要想普通网站那样，实现多种路径，不同路径访问显示不同的内容， 即别人所说的路由。

1.2 什么是路由

这里的路由并不是网络工程方面的路由，网络工程的路由指从一个网络访问另一个网络的路径。这里的路由是指定开发的路由。

路由就是URL到函数的映射。简单理解当访问这个URL，程序就分析这个URL是指定哪个函数或类来处理的。URL指定着某个函数或类来处理，叫绑定，也叫映射。

在web开发中，“route”是指根据url， 分配到对应的处理程序。

路由： 

就是一个路径的解析，根据客户端提交的路径，将请求解析到相应的控制器上； 从 URL 找到处理这个 URL 的类和函数。

java中路由是，URL到函数的映射，交给函数处理，这里的vue是URL么组件映射，是交给组件处理。

二、Vue router介绍

官方解析为：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

简单来说就是级组件分配访问路径，这样就可以让我们理好的规划，分类，管理。