vue使用路由技术实现登录成功后跳转到首页

更新时间：2025年05月15日 10:18:26 作者：运维@小兵

本文主要介绍了vue使用路由技术实现登录成功后跳转到首页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、概述

路由，决定从起点到终点的路径的进程
在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容
Vue Router是Vue.js的官方路由

二、使用步骤

安装vue-router

npm install vue-router@4

在src/router/index.js中创建路由器，并导出

//导入vue-router
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes = [
    { path: '/login', component: LoginVue },
    { path: '/', component: LayoutVue }
]

//创建路由器
const router = createRouter({
    history: createWebHistory(),
    routes: routes
});

export default router

在vue应用实例中使用router

在main.js中导入创建应用实例的js文件，并调用实例的use方法使用路由器

import router from '@/router'

app.use(router)

在这里插入图片描述

声明router-view标签，展示组件内容

在App.vue文件的template标签中，定义router-view标签

<template>
   <router-view></router-view>
</template>

在这里插入图片描述

将来根据路由匹配到的组件内容，都会在router-view标签内进行展示

三、配置登录成功后跳转首页

import { useRouter } from 'vue-router' 
const router = useRouter()

router.push('/')

在这里插入图片描述

四、参考资料

https://www.bilibili.com/video/BV14z4y1N7pg

到此这篇关于vue使用路由技术实现登录成功后跳转到首页的文章就介绍到这了,更多相关vue 登录成功后跳转到首页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Vue 中使用Typescript的示例代码
这篇文章主要介绍了在Vue 中使用Typescript的示例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
Vue之创建项目及目录方式
这篇文章主要介绍了Vue之创建项目及目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
如何防止Vue组件重复渲染的方法示例
在 Vue.js 中,组件的重复渲染是一个常见的问题,可能会影响应用的性能和用户体验,为了提升应用的性能,开发者需要理解 Vue 的渲染机制,并应用有效的方法来避免不必要的组件重渲染,本文将深入探讨如何防止 Vue 组件重复渲染,并提供相关示例代码,需要的朋友可以参考下
2024-10-10
vue draggable组件实现拖拽及点击无效问题的解决
这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了，.defaultTypeTag 是要拖拽的块的类名，要注意的是需要做点击事件的项不能包含在这个类名里面，不然会无法触发点击事件，详细解决办法跟随小编一起学习吧
2022-05-05
Vue匿名插槽与作用域插槽的合并和覆盖行为
这篇文章主要介绍了Vue基础-匿名插槽与作用域插槽的合并和覆盖行为 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
从组件封装看Vue的作用域插槽的实现
这篇文章主要介绍了从组件封装看Vue的作用域插槽的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
Vue高版本中一些新特性的使用详解
这篇文章主要介绍了Vue高版本中一些新特性的使用,需要的朋友可以参考下
2018-09-09
Vue-Router的routes配置详解
在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系，Router配置选项中是其中最重要的配置。本文就详细的介绍一下
2021-10-10
mpvue微信小程序开发之实现一个弹幕评论
这篇文章主要介绍了mpvue小程序开发之实现一个弹幕评论功能，本文通过实例讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-11-11
Vue全局注册与局部注册两种组件注册的方式
本文主要介绍了Vue全局注册与局部注册两种组件注册的方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07