vue-router4 (二) 引入并配置路由_main.ts引入vuerouter4-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76510083/article/details/136318924

本文详细介绍了如何在Vue应用中配置和使用路由，包括在`src/router/index.ts`中定义路由、在`main.ts`中引入并使用路由以及在`app.vue`中展示动态组件。通过`router-view`和`router-link`实现页面跳转和内容切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在项目src/router/index.ts 文件夹下配置路由：

import { createRouter ,createWebHistory,RouteRecordRaw} from "vue-router";
//1.引入路由

//3.routes配置项
const routes:Array<RouteRecordRaw> = [
    {
        path:"/",   //路径
        name:"login",    //路由名称
        component:()=>import("../components/login.vue")   //组件名，此处懒加载方式
    },
    {
        path:"/reg",
        name:"reg",
        component:()=>import("../components/reg.vue")
    },
]

//2.创建路由，写入路由配置项
const router = createRouter({
    history:createWebHistory(),   //路由模式
    routes   //路由配置项
 })


//4.导出路由
export default router;

2.在main.ts入口文件中使用路由：

import router from './router/index'
//引入路由


//使用路由:用use方法串联createApp之后
createApp(App).use(router).mount('#app')

3.最后在app.vue中写入标签即可（router-view作用：显示与 url 对应的组件）：

<template>
  <div>
    <h1>hello</h1>
  </div>
  <!--router-link进行导航,默认将router-link当成a标签进行渲染-->
  <router-link to="/" style="margin-right: 20px;" tag="div">Login</router-link>
  <router-link to="/reg" tag="div">Reg</router-link>

  <!-- router-view作用：根据网页url不同，展示不同内容给用户 -->
 <router-view></router-view>
</template>

完成以上3步骤后，在页面中输入对应的path路径就会显示对应的组件