看之前的项目,突然发现一个不算bug的bug,之前也是一直没有想到,现在发现之后越来越觉得有必要改掉,

项目用的是vue做的,自然切换用的就是路由,一级路由包括:首页、记录和个人中心,二级路由是在记录下面的三个报修记录,

如上图路由分配,一级路由重定向到index,二级重定向至repair,一直觉得这样没什么问题,结果有次突然点到第三方租赁页,然后又点到个人中心,

这是呢,我又想看看刚刚租赁页的信息,这时,由于路由重定向,自然出现的是报修页,这样理论上是没有错的,但是我不想这样呀,所以我就用本地缓存localstorage

把二级路由存下来,想赋给二级路由的重定向,也就是把重定向的值改为一个变量,结果,存是存下来了,但是不会用,放什么地方都不对,然后我就开始翻官网,因为之前项目要得急,也是第一次用vue,

基本上是粗略看了一下,需要用到什么功能就研究下,够做项目用就行,所以这次翻看还是很有收获的,

如图,划横线部分,重定向竟然还可以是一个方法,so,现在就好解决了,

把重定向的部分改为函数,然后判断从localstorage读到的内容,如果为空就默认跳repair,还跟原来一样,如果有值的话,就按里面的值来跳,ok,完美解决。

【12】vue-router 之路由重定向的更多相关文章

  1. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  2. Vue router 一个路由对应多个视图

    使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...

  3. Vue router 全局路由守卫

    记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...

  4. vue router动态路由

    <div id="#app"> <router-link to="/user/header">路由1</router-link&g ...

  5. vue router引入路由与路由配置容易犯错的地方与常见的报错与处理报错

    首先npm安装vue-router插件,就不说了其次: 先看下我本地的目录结构吧 第一步:在src目录下新建一个专门存放router的index.js文件里面的内容为: import Vue from ...

  6. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  7. react router @4 和 vue路由 详解(四)vue如何在路由里面定义一个子路由

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 6.vue如何在路由里面定义一个子路由? 给父路由加一个 children:[] 参考我 ...

  8. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  9. vue教程(五)--路由router介绍

    一.html页面中如何使用 1.引入 vue-router.js 2.安装插件 Vue.use(VueRouter) 3.创建路由对象 var router = new VueRouter({ // ...

随机推荐

  1. Oracle 数字处理函数

    数字处理函数 ① mod(number1,number2) 取余数的函数,比如mod(10,3) = 10/3 = 1. ② round(number,num_ditigs) .trunk(numbe ...

  2. BZOJ2287: 【POJ Challenge】消失之物(背包dp)

    题意 ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. “要使用剩下的 N - 1 物品装满容积为 x 的背包,有几种方法呢?” ...

  3. tomcat修改默认主页, 前段项目放到tomcat下,浏览器输入ip加端口后,直接到项目主页

    1,将 项目 放到 tomcat 的webapps 文件夹下 2, 修改conf 下的 server.xml , 找到 <Host name="localhost" appB ...

  4. mui的选项卡js选中指定项

    dom结构:在一定条件下想默认选中第二个选项卡 <div id="segmentedControl" class="mui-segmented-control mu ...

  5. thinkphp 5数据库操作

    1.原生sql $options=Db::table('__MALL_POST__') ->alias('m') ->join('__MALL_CATEGORY_VALUE__ v','m ...

  6. 【工具】Sublime Text 自动保存功能

    经常需要所以要频繁用到"ctrl+s"保存还是挺麻烦的,所以有的人需要用到失去焦点自动保存功能,这里简单记录下 1.点击"Preferences"里的设置-用户 ...

  7. 深入解析AJAX的原理

    AJAX:Asynchronous JavaScript And Xml(异步的JS和XML) 同步:客户端发起请求>服务端的处理和响应>客户端重新载入页面(循环) 异步:客户端实时请求& ...

  8. 5458. 【NOIP2017提高A组冲刺11.7】质数

    5458. [NOIP2017提高A组冲刺11.7]质数 (File IO): input:prime.in output:prime.out Time Limits: 1000 ms  Memory ...

  9. MySQL之索引(一)

    创建高性能索引 索引是存储引擎用于快速找到记录的一种数据结构.这是索引的基本功能.索引对于良好的性能非常关键.尤其是当表中的数据量越来越大时,索引对性能的影响愈发重要.在数据量较小且负载较低时,不恰当 ...

  10. TCP/IP网络编程之地址族与数据序列

    分配IP地址和端口号 IP是Internet Protocol(网络协议)的简写,是为收发网络数据而分配给计算机的值.端口号并非赋予计算机的值,而是为区分程序中创建的套接字而分配给套接字的序号 网络地 ...