当前位置:首页 > wifi设置知识 > 正文内容

vue如何配置路由

秋天2023年03月30日 22:30:11wifi设置知识245

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

本文内容目录一览:

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设置是每个人都需要的。通过本文介绍的技巧和技巧,您可以轻松地了解如何优化您的网络体验,以满足您的需求。

扫描二维码推送至手机访问。

版权声明:本文由路由设置网发布,如需转载请注明出处。

本文链接:https://www.shoulian.org/luyou/post/19484.html

分享给朋友:

“vue如何配置路由” 的相关文章

百兆的路由器怎么选

百兆的路由器怎么选

今天给各位分享百兆的路由器怎么选的知识,其中也会对100兆路由器怎么选进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站 本文内容目录一览: 1、百兆宽带到底该怎么选择路由器? 2、100兆宽带用什么路由器合适 3、100兆宽带用什么路由器 百兆宽带到底该怎么选择路由器? 先点个关注...

哪些路由器能刷潘多拉固件

哪些路由器能刷潘多拉固件

有很多朋友不知道哪些路由器能刷潘多拉固件要如何操作,今天为大家整理了很多潘多拉固件上网设置相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、小米路由器3A刷入潘多拉固件问题 2、小米路由器3可以刷入潘多拉固件吗 3、各位大神,能推荐一个可以刷潘多拉的千兆路由器吗 4...

水星路由器怎么设置时间

水星路由器怎么设置时间

今天和朋友们分享水星路由器怎么设置时间相关的知识,相信大家通过本文介绍也能对水星路由器设置流程有自已的收获和理解。自己轻松搞问题。本文内容目录一览: 1、Mercury水星MW155R路由器怎么设置 2、水星无线路由器设置教程 3、水星无线路由器如何设置 4、win7旗舰版下,水星路由器...

路由器原有密码怎么设置

路由器原有密码怎么设置

本篇文章给大家谈谈路由器原有密码怎么设置,以及路由器的密码设置怎么弄对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文内容目录一览: 1、路由器怎么设置密码? 2、路由器怎么设置密码 3、无线路由器怎么重置密码? 路由器怎么设置密码? 现在使用无线路由器的朋友很多,因为无线路由...

重新登录路由器怎么登

重新登录路由器怎么登

今天和朋友们分享重新登录路由器怎么登相关的知识,相信大家通过本文介绍也能对路由器重置后怎么登录路由器有自已的收获和理解。自己轻松搞问题。本文内容目录一览: 1、怎样登录路由器 登录路由器的方法 2、我用的宽带更换了账户和密码,路由器如何重新登陆? 3、怎么登陆无线路由器,路由器登录地址是什么...

怎么查看未连接路由器

怎么查看未连接路由器

有很多朋友不知道怎么查看未连接路由器要如何操作,今天为大家整理了很多怎么查看未连接路由器密码相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、路由器什么线都插好了,但是显示wan口未连接? 2、我在自己手机上面怎么看到别人有没有连接到我家的wifi网络? 3、路由器怎么...