Vue 实现重定向、404和路由钩子（六）

news2024/11/23 19:07:05

一、重定向

1.1 修改 Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name 传组件名，params 传递参数，v-bind 进行对象绑定-->
                <router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <!--用于测试重定向-->
              <el-menu-item index="1-3">
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style  scoped lang="scss">
.el-header {
  background-color: yellow;
  color: blue;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

1.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      component:Main,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

1.3 测试

   启动工程，如下所示：

         在地址栏的后缀输入 main ，显示的内容如下所示，先点击个人信息，再点击回到首页，就可以发现地址栏发生了跳转。

二、显示当前登录的用户姓名

2.1 修改 Login.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="8px" class="login-box">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="username">
        <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"v-on:click="onSubmit('loginForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="温馨提示"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary"@click="dialogVisible = false">确 定</el-button></span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      form:{
        username:'',
        password:''
      },
      rules:{
        username:[
          {required: true,message:'账号不可为空',trigger:'blur'}
        ],
        password:[
          {required: true,message:'密码不可为空',trigger:'blur'}
        ]
      },
      // 对话框的显示和隐藏
      dialogVisible:false
    }
  },
  methods:{
    onSubmit(formName){
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if(valid){
          // 传递当前用户输入的用户名参数
          this.$router.push("/main/"+this.form.username);
        }else{
          this.dialogVisible =true;
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
}
.login-title{
  text-align: center;
  margin:0 auto 40px auto;
  color:#303133;
}
</style>

2.2 修改 router 路由

        修改 router 文件夹下的 index.js，内容如下所示：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'

Vue.use(Router);

export default new Router({
  routes:[
    {
      // 接收 login 传过来的参数
      path:'/main/:name',
      component:Main,
      // 允许接收参数
      props:true,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    }
  ]
})

2.3 修改 Main.vue

<template>
  <div>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="['1']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <!--name 传组件名，params 传递参数，v-bind 进行对象绑定-->
                <router-link v-bind:to="{name:'Profile222',params:{id:1}}">个人信息</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/user/list">用户列表</router-link>
              </el-menu-item>
              <!--用于测试重定向-->
              <el-menu-item index="1-3">
                <router-link to="/goHome">回到首页</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
            <el-menu-item-group>
              <el-menu-item index="2-1">分类管理</el-menu-item>
              <el-menu-item index="2-2">内容列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!--显示当前的用户信息-->
          <span>{{name}}</span>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  // 接收 name 参数
  props:['name'],
  name: "Main"
}
</script>

<style  scoped lang="scss">
.el-header {
  background-color: yellow;
  color: blue;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

2.4 测试

        启动工程，网址后缀输入 login，并随便登录，如下所示：

三、路由模式与404

3.1 路由模式

路由默认分为两种，默认的是 hash

        1、hash：路径带 # 符号，如：http://localhost/#/login

        2、history：路径不带 # 符号，如：http://localhost/login

        修改路由配置，代码如下：

export default new Router({
  mode:'history',
  routes:[
    ]
});

3.2 配置 404

        如果用户访问的路径不存在怎么办？给他返回一个 404 即可，新建一个 NotFound.vue 的试图组件，内容如下所示：

<template>
  <div>页面不存在，请重试！</div>
</template>

<script>
export default {
  name: "NotFound"
}
</script>

<style scoped>

</style>

        配置路由信息 index.js 如下：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from '../views/Login'
import List from '../views/user/List'
import Profile from '../views/user/Profile'
// 导入组件
import NotFound from '../views/user/NotFound'

Vue.use(Router);

export default new Router({
  routes:[
    
    {
      path:'/main/:name',
      component:Main,
      props:true,
      // 配置嵌套路由
      children:[
        {
          path:'/user/list',
          component:List
        },
        {
          // 使用:id 进行参数接收
          path:'/user/profile/:id',
          name:'Profile222',
          component:Profile,
          props:true
        },
        {
          // 配置重定向信息
          path:'/goHome',
          redirect:'/main'
        }
      ]

    },
    {
      path:'/Login',
      component:Login
    },
    // 做配置
    {
      path:'*',
      component:NotFound
    }
  ]
})

        测试：

 四、路由钩子与异步请求

4.1 路由钩子

        beforeRouteEnter：在进入路由前执行

        beforeRouteLeave：在进入路由后执行

export default {
  name: "Profile",
  // 进入路由前执行
  // 过滤器，从哪来，到哪去，下一步是什么
  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");
    next();
  },
  // 进入路由后执行
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();
  },
}

4.1.1 参数说明

        to：路由将要跳转的路径信息

        from：路径跳转前的路径信息

        next：路由的控制参数

                next() ：跳入下一个页面

                next('/path') ：改变路由的跳转方向，使其跳到另一个路由

                next(false) ：返回原来的页面

                next(vm=>{}) ：仅在 beforeRouterEnter 中可用，vm是组件实例

4.2 在钩子函数中使用异步请求

4.2.1 安装 Axios

# cnpm 安装失败了就用 npm 安装，我也安装了好几次才启动成功了
cnpm install axios -s


npm install axios -s

4.2.2 在 main.js 中引用 Axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

4.2.3 创建测试数据

        在 static 目录下创建 mock 文件夹，并创建 data.json，内容如下所示：

{
  "name": "狂神说Java",
  "url": "https://blog.kuangstudy.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "含光门",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space,bilibili.com/95256449"
    },
    {
      "name": "狂伸说iava",
      "ur1": "https://blog.kuangstudy.com"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

4.2.4 修改 Profile.vue

<template>
  <!--所有的元素必须不能在根节点下，必须被div 包裹-->
  <div>
    <h1>个人信息</h1>
<!--    {{$route.params.id}}-->
    {{id}}
  </div>

</template>

<script>
export default {
  props: ['id'],
  name: "Profile",

  beforeRouteEnter:(to,from,next)=>{
    console.log("进入路由之前");
    next(vm =>{
      vm.getData();
    });
  },
  // 进入路由后执行
  beforeRouteLeave:(to,from,next)=>{
    console.log("进入路由之后");
    next();
  },
  methods:{
    getData:function(){
      this.axios({
        method:'get',
        url:'http://localhost:8080/static/mock/data.json',
      }).then(function (response){
        console.log(response)
      })
    }
  }
}
</script>

4.2.5 测试

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/857502.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

伪原创神码ai怎么样【php源码】

伪原创神码ai怎么样【php源码】

这篇文章主要介绍了python汉化补丁包下载&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 火车头采集ai伪原创插件截图&#xff1a; ** Spyder汉化&#xff08;python汉化&…
阅读更多...
在vue项目使用数据可视化 echarts ，柱状图、折线图、饼状图使用示例详解及属性详解

在vue项目使用数据可视化 echarts ，柱状图、折线图、饼状图使用示例详解及属性详解

官网地址&#xff1a;Apache ECharts ​一、下载插件并在页面中引入 npm install echarts --save 页面导入&#xff1a; import * as echarts from echarts 全局导入&#xff1a; main.js 中&#xff0c;导入并注册到全局 import echarts from echarts Vue.prototype.$echart…
阅读更多...
【云存储】【腾讯云】【阿里云】【b2】【google drive】【one drive】【s3】【azure】对比

【云存储】【腾讯云】【阿里云】【b2】【google drive】【one drive】【s3】【azure】对比

【1】google drive 【2】b2 price 【3】腾讯云对象存储 文档中心 > 对象存储 > 开发者指南 > 对象 > 存储类型 > 存储类型概述 文档中心 > 对象存储 > 购买指南 > 计费项 > 数据取回费用
阅读更多...
【计算机组成原理】24王道考研笔记——第四章 指令系统

【计算机组成原理】24王道考研笔记——第四章 指令系统

第四章 指令系统 一、指令系统 指令是指示计算机执行某种操作的命令&#xff0c;是计算机运行的最小功能单位。一台计算机的所有指令的集合构成该 机的指令系统&#xff0c;也称为指令集。 指令格式&#xff1a; 1.1分类 按地址码数目分类&#xff1a; 按指令长度分类&…
阅读更多...
AttentionFreeTransformer 源码解析（一）：AFTFull、AFTSimple、AFTLocal

AttentionFreeTransformer 源码解析（一）：AFTFull、AFTSimple、AFTLocal

我觉得源码写的很好懂&#xff0c;我就不加注释了&#xff0c;直接上计算流程图。 AFTFull class AFTFull(nn.Module):def __init__(self, max_seqlen, dim, hidden_dim64):super().__init__()max_seqlen: the maximum number of timesteps (sequence length) to be fed indim…
阅读更多...
echarts柱状图X轴增加table列表显示数据,多y轴

echarts柱状图X轴增加table列表显示数据,多y轴

效果图 完整配置 data(){return{chart1:null,chartType1:1,data:{years:{date:[2015,2016,2017,2018,2019,2020,2021,2022,2023],business:[10,23,26,33,43,58,50,45,66],profit:[3,4,6,7,8,5,7,8,12],proportion:[12,8,15,20,12,16,13,15,9]},months:{date:[1月, 2月,3月, 4月…
阅读更多...
在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

在指定的 DSN 中，驱动程序和应用程序之间的体系结构不匹配

1.Cadence 17.2 配置CIS数据库报&#xff1a;ERROR(ORCIS-6245): Database Operation Failed 安装cadance17.2以上版本时&#xff0c;ERROR(ORCIS-6245): Database Operation Failed_收湾湾的博客-CSDN博客 原因是ODBC数据库没有配置&#xff0c;或者没有驱动&#xff0c; 驱…
阅读更多...
侯捷 C++ part2 兼谈对象模型笔记——3 模板

侯捷 C++ part2 兼谈对象模型笔记——3 模板

3 模板 3.1 类模板/函数模板 补充&#xff1a;只有模板的尖括号中<>&#xff0c;关键字 typename 和 class 是一样的 3.2 成员模板 它即是模板的一部分&#xff0c;自己又是模板&#xff0c;则称为成员模板 其经常用于构造函数 ctor1 这是默认构造函数的实现&#…
阅读更多...
阿里云服务器免费申请使用限制条件及云主机配置

阿里云服务器免费申请使用限制条件及云主机配置

阿里云服务器免费试用申请链接入口&#xff0c;阿里云个人用户和企业用户均可申请免费试用&#xff0c;最高可以免费使用3个小时&#xff0c;阿里云服务器网分享阿里云服务器免费试用申请入口链接及云服务器配置&#xff1a; 目录 阿里云服务器免费试用 企业用户免费服务器试…
阅读更多...
解决Qt的列表加载大量数据卡顿的问题

解决Qt的列表加载大量数据卡顿的问题

问题概述 本人在使用QListView插入大量数据时&#xff0c;界面卡顿十分严重。数据量大概只有上千左右&#xff0c;但是每个Item的内容比较多。当数据不停地插入一段时间后&#xff0c;卡顿到鼠标的移动都有点困难。 解决思路 QListView是典型的MVC思想的产物。界面呈现出来的数…
阅读更多...
CorelDRAW(CDR) 2023中文版64位下载新功能教程

CorelDRAW(CDR) 2023中文版64位下载新功能教程

CorelDRAW2023&#xff08;简称CDR2023&#xff09;是一款非常专业的图形设计工具&#xff0c;该产品推出了全新的2023版本&#xff0c;在功能和体验上更进一步&#xff0c;最新的填充和透明设备功能可以完全控制任何类型的纹理&#xff0c;适用于网络摄影、印刷项目、艺术、排…
阅读更多...
G. Counting Graphs Codeforces Round 891 (Div. 3) 1857G

G. Counting Graphs Codeforces Round 891 (Div. 3) 1857G

Problem - G - Codeforces 题目大意&#xff1a;给出一棵n个点的边权树&#xff0c;问有多少个边权最大不超过s的图的最小生成树是这棵树 2<n<2e5;1<w[i]<1e9 思路&#xff1a;对于最小生成树上的每一条边&#xff0c;如果我们在包含这条边的链上的两点之间加了…
阅读更多...
SpringBoot 该如何预防 XSS 攻击

SpringBoot 该如何预防 XSS 攻击

XSS 漏洞到底是什么&#xff0c;说实话我讲不太清楚。但是可以通过遇到的现象了解一下。在前端Form表单的输入框中&#xff0c;用户没有正常输入&#xff0c;而是输入了一段代码&#xff1a;</input><img src1 onerroralert1> 这个正常保存没有问题。问题出在了列表…
阅读更多...
建设数字化工厂管理系统的必要性有哪些

建设数字化工厂管理系统的必要性有哪些

随着科技的不断发展&#xff0c;数字化已经深入到各个行业和领域&#xff0c;其中包括制造业。数字化工厂管理系统作为一种先进的生产管理模式&#xff0c;能够提高生产效率&#xff0c;降低生产成本&#xff0c;提升企业的竞争力。下面&#xff0c;我们就来探讨一下建设数字化…
阅读更多...
Mysql按小时进行分组统计数据

Mysql按小时进行分组统计数据

目录 前言 按1小时分组统计 按2小时分组统计 按X小时分组统计 前言 统计数据时这种是最常见的需求场景&#xff0c;今天写需求时发现按2小时进行分组统计也特别简单&#xff0c;特此记录下。 按1小时分组统计 sql&#xff1a; select hour(pass_time) …
阅读更多...
自建hexo博客并将原有的文章发布其上

自建hexo博客并将原有的文章发布其上

1、保存粘贴到memo9中的博客文章&#xff0c;并将txt转换成word文档 varPowerShellPath, CommandLine: string; // , ScriptPath begin//save to txtMemo9.Lines.SaveToFile(test.txt);memo10.Lines.SaveToFile(txt2word.ps1);//save as docxPowerShellPath : powershell.exe…
阅读更多...
Simulink仿真模块 - Math Function

Simulink仿真模块 - Math Function

Math Function:执行数学函数 在仿真库中的位置为：Simulink / Math Operations HDL Coder / Math Operations 模型为： 双击模型打开参数设置界面，如图所示： 说明 Math Function 模块可执行许多常见的数学函数。 提示 要执行平方根计算，请使用Sqrt模块。 …
阅读更多...
QGIS二次开发四：实现图层列表

QGIS二次开发四：实现图层列表

在实际开发中我们通常会遇到同时显示多个图层&#xff0c;并且还要实时显示和隐藏各图层的需求&#xff0c;如同 ArcGIS 的图层列表那样&#xff0c;界面左侧显示图层列表&#xff0c;列出当前已加载的所有图层&#xff0c;同时每个图层前面有复选框可以控制图层的显示/隐藏&am…
阅读更多...
虾皮运营每天需要做什么?如何处理后台数据？

虾皮运营每天需要做什么?如何处理后台数据？

#shopee#​有很多朋友想做电商&#xff0c;但是对电商运营比较朦胧&#xff0c;不知道电商运营每天到底该做些什么。今天咱们就来解析下&#xff0c;Shopee电商运营每天该做哪些事情一个合格的电商运营&#xff0c;每天都会做好以下几点&#xff1a; 一、查看数据&#xff1a; …
阅读更多...
echarts自动轮播tooltip

echarts自动轮播tooltip

1. 将自动轮播的工具函数封装到 utils/echart-tooltip-carousel.js /*** echarts自动轮播tooltip* param {Object} chart echart实例* param {Number} num 轮播数量* param {Number} time 轮播间隔时间*/ export function loopShowTooltip(chart, num20, time2000) {let count…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023