vue 项目使用路由 route

一、安装

在终端输入如下命令下载 route

npm i vue-router

 二、路由配置

新建一个 index.ts 文件，在里面配置路由

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  {
    // '/' 表示本目录为根目录，根目录是路由启动时跳转的页面，import里面的为目录
    path: '/',
    component: () => import('../views/RegistrationForm.vue'),
  },
  {
    path: '/welcome',
    component: () => import('../views/Welcome.vue'),
    name: "Welcome",
  }
]
const router = createRouter({
  routes,
  history: createWebHistory()
});
export default router

三、引入

在 main.ts 文件中引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router/index'
createApp(App).use(router).use(ElementPlus).mount('#app')

四、使用

在 App.vue 文件中使用 <router-view> 渲染

<template>
    <div>
      <!-- h2 标签中是固定内容，每次使用路由都会加载 -->
    <h2>
      <span>kkkkkkk</span>
      <img src="" alt="" />
    </h2>
    <router-view></router-view>
  </div>
   
</template>

若想在其他文件跳转，则有两种写法

1. 使用{name: "路由配置名称"}

router.push({ name: "Welcome" });

2. 使用 '路由配置的路径'

route.push('/welcome');