Pinia+Router学习笔记(六)

简介: 从本节开始进入Router学习,先介绍下Vue-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>
相关文章
|
1月前
|
JavaScript
vue.router和vue.route
vue.router和vue.route
|
1月前
|
JavaScript
|
9月前
|
缓存 JavaScript
Vue Router 学习 new Router
Vue Router 学习 new Router
94 0
|
1月前
|
缓存 移动开发 JavaScript
【学习笔记】Vue Router
【学习笔记】Vue Router
38 0
|
9月前
|
JavaScript
Vue Router 学习 router-view基础 以及 routes配置
Vue Router 学习 router-view基础 以及 routes配置
93 0
|
前端开发 中间件 SEO
Pinia+Router学习笔记(七)
本节介绍Vue-Router的两种路由模式
69 0
|
前端开发
Pinia+Router学习笔记(四)
本节记录Pinia中Action和Getters相关知识点
115 0
Pinia+Router学习笔记(三)
本节记录解构Store过程中的相关操作及注意事项
68 0
|
JavaScript
Pinia+Router学习笔记(一)
本系列笔记内容根据B站up主“小满zs”视频教程整理而成,本节记录pinia的搭建过程
123 0
|
网络架构
Pinia+Router学习笔记(十)
本节记录Vue-Router的两种路由传参方式
147 0