Vue 路由引入和传参

5、路由的使用，在components文件夹中的创建Helloworldvue文件

以上步骤就可实现基本的路由导向了，下面是路由的二种传参形式

首先我们在新建立一个路由的时候，在router文件夹下的indexjs文件中

在这里我们假设，我们是从loginvue中跳转到testvue中，这个时候，我们就需要在loginvue文件中这样跳转

vue的路由不可以访问同服务其他包文件。根据查询相关公开信息显示，Vue的路由本身只负责前端的路由控制，即根据URL的不同，渲染不同的组件。因此，Vue的路由并不能直接访问同服务其他包文件，因为这需要后端的支持。

命令行中输入 npm install vue-router --save-dev

要想使用路由，要在mainjs文件中引入vue-router路由模块--- import VueRouter from 'vue-router'

Vueuse(VueRouter)

（1）注明要使用这个路由之后，就可以在下方配置路由--- const router = new VueRouter({})

（2）括号中传递对象，对象的参数是固定的。

（3）参数routes是个数组，数组里面可以拥有对应的对象。

（4）对象中的第一个参数是path，path是要路由的地址，比如下例我们的路由地址是根路径"/"

（5）对象中的第二个参数是component，如果抓到了路由的地址，需要调用一个component，component可以跳转到对应的组件地址

现在这个路由并不能被使用，因为找不到Home和HelloWorld组件。所以，我们引进Home和HelloWorld组件。（注意：这里HelloWorld组件已存在，Home组件还未创建）

import HelloWorld from '/components/HelloWorld'

import Home from '/components/Home'

（1）首先，在components文件夹下建立Homevue组件

（2）我们要让 Homevue成为Headervue和Footervue和Usersvue的父级

（3） *** 作Homevue如下，然后将Appvue中的组件和import内容清除

现在可以找到路由地址“/”，也能执行Home组件，但是没有告诉系统在哪里展示这个Home组件。这里根组件是App，所以要在Appvue当中输入对应内容。 <router-view></router-view>

上图url处仔细观察会发现，有多余的#/标识，需要去掉。因为我们自己定义路由，点击实现的时候会有问题。

在配置路由时加入一个属性 mode:"history" ，就可以去掉了

功能和a标签一致，只是点击不会每次都发送请求，刷新页面，所以项目运行速率好很多。

项目基于 vue-element-admin 基础之上进行开发，感谢 花裤衩 以及为此项目做出贡献的大佬 [社会社会]！

路由数据由后端控制，前端调用接口返回数据；前端拿到数据处理成可使用的路由结构，然后渲染到页面。

为了能提供更多的功能，后端返回的数据结构是在原来菜单结构基础之上有所改动的。

原路由数据结构：

后端返回数据结构：

路由数据采用多级嵌套结构，基本可以满足需求。

拿到接口返回的数据之后还不能直接使用，需要经过一些处理。

在本地的开发，新增页面时，为了方便开发，获取到后端返回的数据之后用了一个方法来合并数据：

temporaryMenuArray 临时路由数组的结构需要跟后端返回的数据结构一致。

使用 setTemporaryMenu :

合并完临时的路由之后就开始进行路由的处理了。

从上面后端返回的数据结构中可以看出，已经和需要处理成的路由很像了，但还是有一些数据没有必要在专门的系统那里维护，所以需要一些其他数据的处理：

routesComponents 为一个手动维护的页面路由文件：

得到的 userCanUseRouteModules 结构如下：

上面数据中的 type 为2、3层级的 component 已经被替换成对应页面的路由模块了。

得到 userCanUseRouteModules 之后，其中 name 为 storeManagement:head 的那一层数据是供头部菜单使用的，其 children 的数据才是需要添加的路由数据：

此时的 asyncRoutes 只放了默认匹配的路由，这个是需要放在所有路由的最后的：

至此对路由的处理结束。

处理路由这一步是放在 routerbeforeEach 路由全局前置守卫里的，结合原有的逻辑进行了一些判断处理。

因为路由数据是由后端数据处理得到的，只包含和挂载了当前用户能有权限访问的部分，没有权限访问的路由就没有被 routeraddRoutes 添加，所以并没有在路由守卫里对每次路由的跳转都进行校验。

1、vue中的路由是在找到目的地。

2、路由器里根据目标IP，找到中间需要经过的路由器路径，Web里根据网址找到能处理这个URL的程序或模块。

3、网络原理中，路由指的是根据上一接口的数据包中的IP地址，查询路由表转发到另一个接口，它决定的是一个端到端的网络路径。

4、web里面路由概念也是类似的，根据URL来将请求分配到指定的一个端，另外也可指在某一个节点设置转发，将到达这里的每一个包或者说URL重新定向到另一个端并且可以在这个过程中对这个包进行处理。

以上就是关于Vue 路由引入和传参全部的内容，包括:Vue 路由引入和传参、vue的路由可以访问同服务其他包文件吗、Vue 实现路由自动加载等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！