Vue3 + vite + Ts + Router 路由注册、使用方法

Vue3 + vite + Ts + Router 路由注册、使用方法

官网

1、安装

npm install vue-router -S

2、创建 router

• 在 str目录中创建router目录，并目录中创建index.ts文件，文件示例代码如下：

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

// RouteRecordRaw：路由数组的类型

/**
 * 本地静态路由
 */
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/login',
    component: () => import('@/views/login/index.vue')
  },
  {
    // 定义404路由
    path: '/404',
    component: () => import('@/views/404.vue')
  },
  {
    // 匹配为定义路由然后重定向到404页面
    path: '/:pathMath(.*)',
    redirect: '/404'
  }
]

const router = createRouter({
  history: createWebHistory(), // history
  // history: createWebHashHistory(), // hash
  routes, // 路由数组，等 routes:routes
  linkActiveClass: 'router-active', // 自定义被激活路由的class类名 默认名router-link-active
  linkExactActiveClass: 'router-exact-active' // 自定义精准激活router-link的class类名 默认 router-link-exact-active
})

router.beforeEach((to, from, next) => {
  console.log('路由守卫 - beforeEach')
  console.log(to)
  console.log(from)
  next()
})
router.afterEach((to, from) => {
  console.log('路由守卫 - afterEach')
  console.log(to)
  console.log(from)
})

export default router

3、注册

• 在main.ts文件中导入router，并注册，示例代码如下：

// 导入 router（在 str 目录中创建的 router ）
import router from "@/router";

// 创建 Vue 实例对象
const app = createApp(App);

// 注册路由
app.use(router)

app.mount("#app")

4、使用方法

<router-link to="/home">首页</router-link>
<router-link to="/login">登录</router-link>
<!-- 路由占位符 -->
<router-view></router-view>