简单上手 Vue Router

Vue Router 也随着 Vue3 的更新来到了 4 版本，来看一下怎么使用吧！（这里使用的是 composition API 和 TypeScript 模式）

安装 vue-router4

npm install vue-router@4

在 /src 下新建 router/index.ts

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

const routes:Array<RouteRecordRaw> = [...]

const router = createRouter({
    history: createWebHashHistory(),
    /*
     * 如果配置的是 createWebHashHistory 则浏览器地址栏所
     *  显示的路径中会带有 "#" 号
     * 如果使用 createWebHistory 则不会出现
     */
    routes
})

export default router

routes 里面配置的是路由数组

以下是我的路由数组

const routes:Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('@/components/IndexPage.vue'),
    },
    {
      path: '/login',
        component: () => import('@/components/LoginPage.vue')
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: () => import('@/components/404.vue')
    }
]

路径里的 @ 符代表 src 路径，可以参考以前的文章，最后一个路由的 path 内的内容表示未匹配的路径

配置子路由

    {
        path: '/',
        component: () => import('@/components/IndexPage.vue'),
        children: [
            {
                path: '/',
                component: () => import('@/components/page/OneSubPage.vue')
            },
            {
                path: '/two-sub-page',
                component: () => import('@/components/page/TwoSubPage.vue')
            }
        ]
    },

这里给 IndexPage 下的页面放置了两个子页面，分别为 OneSubPage 和 TwoSubPage，配置子路由的方式基本和一级路由一样。

在 main.ts 中注册路由

main.ts 是我们整个项目的入口文件

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

createApp(App).use(router).mount('#app')

在 App.vue 中配置 router-view

<template>
  <router-view></router-view>
</template>

这里只写了几个简单的页面来展示路由功能，具体代码就不放了 😐

测试路由

尝试下启动项目，并在浏览器打开：

默认的路径为 /，所进入的路由页面是 IndexPage -> OneSubPage

---

如果想进入当前一级路由的第二个子路由：

---

如果想进入另一个一级路由：

路由跳转

这里先简单展示一下一个路由跳转按钮的代码吧 💩

<template>
  <button @click="login">登录</button>
</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router';

// 定义路由器，负责路由跳转
const router = useRouter();

// 登录按钮：路由跳转
function login() {
  router.push('/');
}
</script>