vue-router路由组件有哪些

vue-router路由组件包括以下几个：

1. Router：路由器，用于管理所有的路由规则。

2. Route：路由规则，用于定义路由的路径和对应的组件。

3. Link：用于生成路由链接，可以通过点击链接跳转到对应的路由页面。

4. Redirect：用于进行路由重定向，可以将一个路由重定向到另一个路由。

5. RouterView：用于渲染对应的路由组件，根据当前的路由规则动态加载对应的组件。

相关问题

vue-router 路由模式有哪些,实现方式及原理

vue-router的路由模式有三种：哈希模式（hash mode）、历史模式（history mode）和抽象模式（abstract mode）。

1. 哈希模式：默认使用的路由模式，通过改变URL中的hash值来进行路由的切换。例如：http://example.com/#/home。
实现方式：通过监听URL中hash值变化的事件，当hash值改变时，动态渲染相应的组件内容。
原理：浏览器会将hash值的变化当作页面的锚点变化来处理，不会重新发送请求，而是通过监听hashchange事件来更新URL对应的视图。

2. 历史模式：通过修改URL的路径来进行路由的切换，去除URL中的hash值。例如：http://example.com/home。
实现方式：通过HTML5的history API（pushState和replaceState方法）来修改URL路径并将路由信息保存在浏览器的history栈中。同时需要配合服务器端的配置，将所有的URL请求都指向根页面。
原理：history API可以修改URL路径并保持在浏览器的历史记录中，当URL发生改变时，浏览器会发送请求到服务器，服务器通过配置将所有的URL请求都指向根页面，然后由vue-router解析路由信息并呈现对应的视图。

3. 抽象模式：不依赖于浏览器的URL，可以将路由信息保存在任意位置，并通过切换路由信息来改变页面内容。
实现方式：通过自定义路由器（Router）和路由（Route）对象来管理路由状态，并通过编程方式来切换路由信息。
原理：抽象模式不依赖于浏览器的URL，可以将路由信息保存在任意位置，例如内存或者状态管理库中。通过切换路由信息，可以触发相应的组件渲染。

vue-router路由执行流程

Vue-Router是Vue.js官方提供的路由管理器，它可以方便地实现前端路由功能。Vue-Router的路由执行流程如下：

1. 创建VueRouter实例。在Vue应用中使用VueRouter，需要先创建一个VueRouter实例，可以在main.js文件中进行创建。

2. 配置路由规则。在创建VueRouter实例时，需要配置路由规则，即定义应用中的所有路由及其对应的组件。

3. 注入VueRouter实例。在Vue应用中使用VueRouter，需要将VueRouter实例注入到Vue实例中，可以在main.js文件中进行注入。

4. 使用路由组件。在Vue组件中使用路由需要使用<router-view>标签来展示对应的组件。

5. 跳转路由。在Vue组件中使用路由跳转，需要使用<router-link>标签来定义路由链接，并设置对应的to属性。

6. 路由导航守卫。Vue-Router提供了路由导航守卫，可以在路由跳转前、跳转后、跳转取消等不同阶段执行一些逻辑操作，例如用户鉴权等。

总的来说，Vue-Router的路由执行流程就是：创建VueRouter实例 -> 配置路由规则 -> 注入VueRouter实例 -> 使用路由组件 -> 跳转路由 -> 路由导航守卫。