vue3安装 router 路由

最新推荐文章于 2024-08-06 19:30:24 发布

前端小趴菜05

最新推荐文章于 2024-08-06 19:30:24 发布

阅读量512

点赞数 7

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_68716504/article/details/135555877

版权

本文介绍了如何在Vue应用中使用vue-router进行路由配置，包括创建路由器实例、定义路由路径和组件，以及在App.vue中设置路由出口。通过示例展示了如何在src目录下创建并导入Home组件，确保项目启动后显示首页。

摘要由CSDN通过智能技术生成

安装路由

cnpm i vue-router

在`src`文件夹下创建`router/index.ts`

import {createRouter,createWebHashHistory} from 'vue-router'
const router=createRouter({
    history:createWebHashHistory(),
    routes:[
        {
            path:"/",
            name:'home',
            component: () => import('../views/Home/index.vue')
        }
    ]
})

export default router

`在src/main.ts`中导入挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

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

在`src`文件夹下创建`views/Home/index.vue`

<template>
  <div>首页</div>
</template>

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

<style lang="less" scoped></style>

`在src/App.vue`中设置路由出口，其他内容都删除

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

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

</script>

<style lang="less" scoped>

</style>