安装 | 前端小栈

On this page

安装

pnpm add vue-router@4

使用

# mkdir
|-- src
    |-- router
    |   |-- index.ts
    |-- views
        |-- abc.vue

// src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/abc',
    name: 'Abc',
    component: () => import('@/views/abc.vue') // 注意这里要带上 文件后缀.vue
  }
]

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

export default router

<!-- App.vue -->

<template>
  app.vue
  <router-view></router-view>
</template>

<script setup lang="ts"></script>

<style></style>

// main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

考虑点

基础路由
- 登录
- 根路由
- 错误（404）
- 重定向
业务路由
路由守卫