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

文章目录

• 一、概述
• 二、使用步骤
• • 安装vue-router
  • 在src/router/index.js中创建路由器，并导出
  • 在vue应用实例中使用router
  • 声明router-view标签，展示组件内容
• 三、配置登录成功后跳转首页
• 四、参考资料

---

一、概述

路由，决定从起点到终点的路径的进程

在前端工程中，路由指的是根据不同的访问路径，展示不同组件的内容

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?spm_id_from=333.788.player.switch\&vd_source=0467ab39cc5ec5940fee22a0e7797575\&p=77