本文已参与「新人创作礼」活动，一起开启掘金创作之路
引入完成Element-Plus后，本文介绍如何使用Vue-Router实现简单的路由跳转

安装vue-router

在package.json的dependencies配置中添加"vue-router": "^4.0.12",然后执行yarn命令下载依赖
在src目录下新建文件夹router,在下边新建index.ts,内容如下

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    redirect: '/index',
  },
  {
    path: '/index',
    component: () => import(/* webpackChunkName: "index" */ '@/views/index/index.vue')
  },
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue')
  }
]
// Vue-router新版本中，需要使用createRouter来创建路由
const router = createRouter({
  // 指定路由的模式
  history: createWebHistory(),
  routes
})
export default router

此处采用createWebHistory，在访问路径时不必带#
redirect：重定向，访问/的时会重定向到/index
component：组件，import(/* webpackChunkName: "index" */ '@/views/index/index.vue')代表为预加载这个文件为index

修改main.ts添加router使用，修改引入app的方式如下

import { createApp } from 'vue'
import App from './App.vue'
import route from '@/router/index'
const app = createApp(App)
app.use(route)
app.mount('#app')

在src目录下创建view，然后在下边创建两个文件夹：login、index，在各自的文件夹下创建index.vue内容如下

index/index.vue

<template><h1>我是index</h1></template>

<template><h1>我是login</h1></template>

在App.vue中引入router-view，代码如下

<script setup lang="ts"></script>
<template>
  <router-view></router-view>
</template>

执行yarn dev命令启动项目，此时访问ip:port/index时会显示我是index,访问/login时会显示我是login

使用Element-Plus实现左侧固定点击访问不同的路径

这里的中心思想是由layout统一使用router-view显示不同的页面，实现的步骤如下

在src/components下新建layout文件夹，然后新建index.vue内容如下

<template>
  <el-row class="header">
    <el-col :span="4" class="peoject-name">Vue Three Admin</el-col>
    <el-col :span="20"></el-col>
  </el-row>
  <el-row>
    <el-col :span="4">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="true"
        @close="false"
        :collapse="false"
        @select="handleMenuSelect"
      >
        <el-menu-item index="/">
          <el-icon><home-filled /></el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-sub-menu index="">
          <template #title>
            <el-icon> <icon-menu /></el-icon> 系统管理
          </template>
          <el-menu-item index="/login">
            <template #title>
              <el-icon> <icon-menu /></el-icon> 去登录页
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="20">
      <router-view />
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import { HomeFilled, Menu as IconMenu } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
function handleMenuSelect(indexPath) {
  if (indexPath && indexPath.startsWith('/')) {
    router.push({ path: indexPath })
  }
}
</script>
<style scoped lang="scss">
.header {
  height: 30px;
  .peoject-name {
    text-align: center;
  }
}
.el-menu-vertical-demo {
  .icon {
    font-size: 20px;
    margin-right: 6px;
  }
}
</style>

此处将左侧的目录占用设置为4，右侧显示内容区设置为20。想要加载那个文件点击对应的目录即可，此时直接向路由push需要加载的路径即可加载对应的页面 2. 修改router/index.ts，使路由使用当前组件,修改如下

import { createRouter, createWebHistory } from 'vue-router'
import LayOut from '@/components/layout/index.vue'
const routes = [
  {
    path: '/',
    redirect: '/index',
    component: LayOut
  },
  {
    path: '/index',
    component: LayOut
  },
  {
    path: '/login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue')
  }
]
// Vue-router新版本中，需要使用createRouter来创建路由
const router = createRouter({
  // 指定路由的模式
  history: createWebHistory(),
  routes
})
export default router

注意此处login是不必使用该组件的
重启项目之后访问首页即可出现点击左侧去登陆页跳转到登陆，访问index进入目录加布局页面
现在index.ts没有引入所以现在显示为空白页。会在下篇文章设计首页和登录页

结语

欢迎关注我的掘金账号:juejin.cn/user/261290…
欢迎star我的git项目:gitee.com/liangminghu…
下期预告:设计首页和登录页，常用表单验证总结

Vite+Vue3集成Vue-Router实现静态跳转

安装vue-router

使用Element-Plus实现左侧固定点击访问不同的路径

结语