浪花 - 前端路由整合详细步骤

乐小鑫

已于 2024-01-07 17:16:51 修改

阅读量689

点赞数 18

分类专栏：浪花 - 前端文章标签：前端 vue javascript

于 2024-01-07 17:01:39 首次发布

本文链接：https://blog.csdn.net/m0_74059961/article/details/135441554

版权

浪花 - 前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue项目中引入并配置vue-router，包括安装、导入路由组件、定义路由映射、创建路由实例、挂载路由以及使用router-view和router-link进行导航。同时提到了Vant组件库对Vue-Router的集成。

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

1. 引入 vue-router 的 js 库

npm install vue-router@4

2. 从其他文件导入路由组件

import Index from "@/pages/Index.vue";
import Team from "@/pages/Team.vue";

3. 定义路由，每个路由都需要映射到一个组件

routes: [
    {
      path: '/',
      name: 'home',
      component: Index
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    },
    {
      path: '/team',
      name: '队伍',
      component: Team
    }
  ]

4. 创建路由实例，并导出 router 配置

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Index
    },
  ]
})

export default router

5. 创建并挂载根实例（一般创建项目时就创建好了）

// 创建
const app = createApp(App)

// 使用路由实例，确保整个应支持路由
app.use(router)

// 挂载
app.mount('#app')

6. 使用 router-view 组件指定路由对应组件的渲染位置（可以看成一个占位符）

<div id="content">
    <router-view></router-view>
</div>

7. 使用 router-link 组件进行导航，to 属性指定跳转链接

<router-link to="/">Go to Home</router-link>
<router-link to="/team">队伍</router-link>

8. 底部标签栏添加路由

Vant 组件库整合了 Vue-Router，直接使用 Vant 组件库的路由功能

9. 查看效果