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

最新推荐文章于 2024-05-30 20:32:59 发布
最新推荐文章于 2024-05-30 20:32:59 发布
阅读量1.4k 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xhf852963/article/details/132203703
版权

一、重定向

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 测试

 

快乐的小三菊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue Router4笔记（一）
AKAbighemorrhoid的博客
12-14 3610
Vue Router4笔记
【Vue2+3入门到实战】（16）VUEVue路由的重定向、404、编程式导航、path路径跳转传参 详细代码示例
shenchengyv的博客
12-30 2255
编程式导航有几种跳转方式？编程式导航，如何跳转传参？1.path路径跳转query传参this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'})动态路由传参this.$router.push('/路径/参数值')path: '/路径/参数值'})2.name命名路由跳转query传参name: '路由名字',query: {参数名1: '参数值1',
Vue怎么实现页面重定向
weixin_35749786的博客
02-12 1858
Vue中可以使用「router」进行页面重定向。首先需要在 Vue 项目中安装「vue-router」插件，然后在 main.js 文件中进行配置。 配置完成后，可以在组件内使用「this.$router.push」或「this.$router.replace」方法来进行页面重定向。 例如： this.$router.push({path: '/new-page'}) ...
vue路由从入门到进阶 --- 路由重定向与404等问题
最新发布
前端菜鸟的自我修养
05-30 1165
本文讲解vue路由的【路由404问题】【路由模式设置】【路由重定向】等内容，并结合具体案例让小伙伴们深入理解 ，彻底掌握！
Vue Router 的重定向基础和复杂用法详解指南
html0010的博客
09-14 7536
Vue Router的重定向功能非常强大，可以根据不同的需求进行设置。无论是基于路径、命名路由、参数还是查询参数，我们都可以根据自己的需求设置重定向。从简单的路径重定向到复杂的条件性和动态重定向，通过合理使用重定向，可以改善用户体验并导航用户到正确的页面。
VUE 当路由访问路径不匹配默认跳转 404 页面
day day up
06-26 4579
在 Vue 中，可以通过在路由配置中添加一个“通配符”路由来实现当所有的路由访问路径不匹配时，自动跳转到 404 页面的效果。具体来说，我们可以在路由配置的末尾添加一个的路由，该路由会匹配所有未匹配到其他路由的路径，并将其重定向到 404 页面。在这个例子中，我们创建了一个名为NotFound的组件，它包含了一个简单的错误信息。接下来，在路由配置中，我们可以添加一个通配符路由来显示这个组件：在这个路由配置中，我们添加了一个名为not-found的路由，它的路径使用了通配符数。
详解给Vue2路由导航钩子和axios拦截器做个封装
08-27
在路由钩子层面，我们可以实现用户鉴权和重定向。通过在路由配置中添加meta对象，我们可以指定某些路由需要用户登录权限。在路由钩子中，我们可以判断是否需要鉴权处理，并执行相应的逻辑操作。 8. axios提供的请求...
vue用addRoutes实现动态路由的示例
08-29
在之前的文章中，我们讨论了基于 Vue 实现后台系统权限控制的思路，但是在每次路由跳转的 before 钩子里做判断的方法不太"优雅"。幸运的是，vue-router 2.2 版本新增了一个 router.addRoutes(routes) 方法，让动态...
Vue利用路由钩子token过期后跳转到登录页的实例
11-26
在Vue2.0中的路由钩子主要是用来拦截导航，让它完成跳转或前取消，可以理解为路由守卫。 分为全局导航钩子，单个路由独享的钩子，组件内钩子。 三种 类型的钩子只是用的地方不一样，都接受一个函数作为参数，函数...
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
一种方法是创建一个名为`redirect.vue`的空白页面，然后在`beforeCreate`钩子中根据查询参数重定向回目标页面： ```javascript export default { beforeCreate() { const nextPath = this.$route.query.nextPath...
VUE+elementui面包屑实现动态路由详解
10-16
在本文中，我们将深入探讨如何在Vue+Element UI环境中实现动态路由与面包屑的绑定。 首先，我们需要定义路由配置。在给定的示例中，`routerMap`是一个包含多个路由对象的数组。每个路由对象定义了路径、重定向、...
vue-router重定向不刷新问题的解决
08-27
问题描述：在使用 Vue Router 进行路由重定向时，旧项目路径和新项目路径不一致，导致 app 端分享出的链接依旧是旧项目链接。重定向后，页面不会刷新，导致页面无法正确显示。 解决方法：通过阅读 Vue Router 的...
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
10-18
本文将深入探讨Vue的钩子函数，特别是路由导航守卫和`keep-alive`组件，以及生命周期钩子。 首先，Vue的生命周期钩子是我们在组件创建、更新和销毁过程中可以利用的关键点。以下是一些常见的生命周期钩子： 1. `...
vue地址栏直接输入路由无效问题的解决
10-17
在Vue.js应用中，直接在浏览器地址栏输入路由通常是可行的，但这依赖于正确的路由配置和设置。在某些情况下，可能会遇到输入路由后页面无法正确显示的问题，这通常与Vue Router的模式、历史记录管理和浏览器兼容性...
详解Vue2.X的路由管理记录之 钩子函数（切割流水线）
08-30
总的来说，Vue2.X的路由钩子函数是实现动态路由控制和数据同步的关键，它们使得我们可以灵活地拦截、修改和确认路由切换，从而构建出复杂的单页应用。理解并熟练运用这些钩子，能极大地提升应用的用户体验和功能完善...
Vue路由指定重定向跳转（电商项目中的路由跳转逻辑）
Allurewuhui的博客
03-12 2714
需求概述： 当用户没有进行登录时是不允许跳转到 个人订单，我的购物车等页面的，如果用户在未登录状态下点击了这些选项，则跳转到登录页面让用户进行登录。 当用户登录完成之后不是跳转回首页，而是直接跳转回用户点击的那个选项本应跳转的页面。 比如点击个人订单跳转到登录页面了，完成登陆后直接跳转回个人订单页面。 解决方法： 1.在进行路由跳转登录页面时动态的给登录页面传递 query 参数。（下方图片代码是写在全局路由守卫当中的） 2.因为在跳转时给 login 登录页面传递了 query 参数.
vue-router——重定向-redirect、过渡动画、路由钩子
qq_35574727的博客
08-07 9882
一.vue-router的重定向-redirect 有时候设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 export defa...
Vue的路由深入理解（重定向，嵌套，路由模式，异步）
david2000999的博客
04-17 833
目录标题路由嵌套 路由嵌套 嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： /user/foo/profile /user/foo/posts +------------------+ +-----------------+ | User | | User | | +--
vue 路由钩子before
07-28
在 Vue.js 中，路由钩子 `beforeEach` 是在路由导航之前被调用的。你可以使用它来执行一些逻辑，例如验证用户权限、获取数据等。下面是一个示例： ```javascript const router = new VueRouter({ routes: [...], }); router.beforeEach((to, from, next) => { // 在路由导航之前执行逻辑 // 可以根据需要进行权限验证、数据获取等操作 // 调用 next() 继续路由导航 next(); }); ``` 在 `beforeEach` 钩子中，你可以访问 `to` 和 `from` 参数，它们分别代表即将导航到的路由和当前的路由。你可以根据这些参数来执行不同的逻辑。 如果你想取消路由导航，可以调用 `next(false)`。如果你想重定向到另一个路由，可以调用 `next('/other-route')`。 需要注意的是，在 `beforeEach` 钩子中可以进行异步操作，例如发送网络请求来获取数据。你可以在异步操作完成后调用 `next()` 来继续路由导航。 希望这能回答你的问题！如果还有其他疑问，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

快乐的小三菊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值