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