vue使用路由技术实现登录成功后跳转到首页
作者：运维@小兵
本文主要介绍了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标签内进行展示
三、配置登录成功后跳转首页
Login.vue
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/')
四、参考资料
https://www.bilibili.com/video/BV14z4y1N7pg
到此这篇关于vue使用路由技术实现登录成功后跳转到首页的文章就介绍到这了,更多相关vue 登录成功后跳转到首页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！