vue3学习——路由

安装

pnpm i vue-router

/src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from '@/router/routes.ts'

let router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoute,
})

export default router

/src/router/routes.ts

export const constantRoute = [
  {
    path: '/Login',
    component: () => import('@/views/Login/index.vue'),
    name: 'Login',
  },
  {
    path: '/',
    component: () => import('@/views/Home/index.vue'),
    name: 'layout',
  },
  {
    path: '/404',
    component: () => import('@/views/404/index.vue'),
    name: '404',
  },
  {
    path: '/:pathMatch(.*)*',
    redirect: '/404',
    name: 'Any',
  },
]

main,ts 注册

// 注册路由
import router from '@/router/index.ts'
app.use(router)

使用App.vue

  <router-view></router-view>