vue3/Element-Plus/路由的使用

我们来实现一个简单的二级路由

1.准备主页和要配置的组件

主页面

<template>
  <!-- 加载配置路由 -->
  <RouterView></RouterView>
</template>

<style scoped>

</style>

组件1

<template>
    <div>考试组件</div>
</template>

组件2

<template>
    <div>首页组件</div>
</template>

组件3

<template>
    <div>
        我的登录页面
        
    </div>
</template>

2.进行路径引用和路由配置、

在一级配置路径后加

component:Home
      },{
        path: '/exams',
        component:Exams
      }]

进行二级配置，该放方可多次嵌套。

import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
// @ts-ignore
import Home from '@/views/Home/index.vue'
// @ts-ignore
import Exams from '@/views/Exams/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: Layout,
      children: [{
        path: '',
        component:Home
      },{
        path: '/exams',
        component:Exams
      }]
    },{
      path: '/login',
      component: Login,
    }
  ]
})

export default router

3.启动服务输入不同地址观看效果

路径为：

http://localhost:5173/

的效果图

路径为：

http://localhost:5173//exams

的效果图

路径为：

http://localhost:5173//Login

的效果图

注意！！如果出现代码没问题但是没有效果的情况请检查是否正确引入了路由工具

在

main.ts文件内

//路由工具
import router from './router'