本文将为您介绍有关vue如何配置路由的一些重要信息，包括vue路由不显示的详细内容。如果您想了解更多相关的知识，请继续阅读本文，并将我们的网站添加到书签以获取更多的信息。

本文内容目录一览：

• 1、Vue实现动态路由
• 2、Vue路由的使用
• 3、Vue 路由和Http

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由

后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息

Vue路由的使用

路由允许我们通过不同的URL去访问不同的内容，该URL可以是我们自己设置的，在项目中并没有这样的文件夹，这种功能就是路由

路由的本质是hash值

定：定义路由组件

配：配置路由

实：实例化路由

挂：挂载路由

路由（vue-router）的基本作用就是将每个路径映射到对应的组件，通过修改路由进行组件之间的转换

常规路径规则为在当前路径后面加上"/path"，path即为设定的前端路由路径

  跳转到上一次的页面：this.$router.go(-1);

  指定跳转的地址：this.$router.replace("/path");

  指定跳转的路由名字下：this.$router.replace({name:"menuLink"});

  通过push进行跳转:this.$router.push("/path");

  或this.$router.push({name:"path"});

  （1）设置一个默认展示组件，（不推荐！！！）

        {path:"/",component:login}

    (2) 路由redirect重定向，设置默认组件

        {path:"/",redirect:"login"}

  （1）创建一个路由对象，当导入vue-router包之后，在window全局对象之中就有一个路由的构造函数VueRouter

  （2）在new路由对象的时候可以传递一个配置对象，这个配置对象的route表示路由器的匹配规则

  （3）每个路由规则都是一个对象，这个规则对象身上必须有两个属性

        属性1：path表示监听那个路由的链接地址

属性2：component表示如果路由是前面匹配到的path，则展示component属性对应的组件，

      component属性值必须是一个组件模板对象，不能是组件的引用名称

  （4）router：routerObj将路由规则对象，注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件

  （5）使用vue官方提供的router-link元素使用它，默认渲染成一个a标签，router-link to="login"登录/router-link

  （6）在控制的div中（App.Vue）使用router-view/router-view

Vue 路由和Http

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

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

Vue.use(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文件夹下建立Home.vue组件

（2）我们要让 Home.vue成为Header.vue和Footer.vue和Users.vue的父级

（3）操作Home.vue如下，然后将App.vue中的组件和import内容清除

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

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

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

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

在当今高度数字化的世界中，良好的路由器和Wi-Fi设置是每个人都需要的。通过本文介绍的技巧和技巧，您可以轻松地了解如何优化您的网络体验，以满足您的需求。