Vue项目中配置router路由

安装

npm install vue-router

在main.js中写入

import { createApp } from 'vue'
import App from './App.vue'
export const app = createApp(App)

import router from './router' //引入router

app.use(router) //安装router

配置文件

文件目录

index中的内容 示例代码，也可以直接拿去用

import { createWebHistory, createRouter } from "vue-router";

const routes = [
  {
		path: '/',
		redirect:'/login'
	},
  {
    path: '/login',
    name: 'login',
    component: () => import('/src/views/Login.vue')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('/src/views/Home.vue'),
    redirect:'/home/searchCard',
    children:[
      {
        path: "tableDetail",
        name: "tableDetail",
        component: () => import('/src/page/table/TableDetail.vue')
      },
      {
        path: "searchCard",
        name: "searchCard",
        component: () => import('/src/page/searchCard/SearchCard.vue')
      }
    ]
  },
  {
    path: "/404",
    name: "404",
    component: () => import('/src/page/exception/404.vue'),
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router

在想塞路由的地方，把这个router-view塞进去，他就会匹配进你的路由视图里面

<template>  
  <div id="app"> 
    <a-config-provider :locale="zh_CN" :autoInsertSpaceInButton="false">
      <router-view />
    </a-config-provider>
  </div>
</template>