Pinia+Router学习笔记（六）

安装:pnpm add vue-router

在src目录下新建一个router文件夹，再在其中建立一个index.ts文件，里面存储路由的配置信息

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

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/login.vue'),
    },
    {
        path: '/reg',
        component: () => import('../components/reg.vue'),
    },
]

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

export default router

创建完毕后在main.ts中注册：

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

const app = createApp(App)

app.use(router)

app.mount('#app')

接下来在任意一个组件中定义出口即可，这里使用的是App.vue

<template>
    <h1>小满最骚</h1>
    <router-link to="/reg">点击此处跳转</router-link>
    // 路由出口
    <router-view></router-view>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue'

</script>

<style scoped>

</style>