vue路由

最新推荐文章于 2025-05-31 16:02:29 发布

码农小趴菜

最新推荐文章于 2025-05-31 16:02:29 发布

阅读量399

点赞数 8

文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/2301_77337099/article/details/136040898

版权

本文介绍了如何在Vue.js项目中使用VueRouter进行路由配置，包括一级路由(App.vue)和二级路由(Layout.vue)的实现，以及`router/index.js`中的具体路径和组件导入示例。

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

1.router / index.js页面

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/login', component: () => import('@/views/Login') },
  {
    // path: '/',
    // redirect: '/deshoard',
    path: '/home',
    redirect: '/home/deshoard',
    component: () => import('@/views/Layout'),
    children: [
      // 子路由必须以路由展开 保证先渲染父路由 父路由的基础上展开子路由
      // 子路由不以/开头被认为简写 那么就会主动拼接 父路由/
      { path: '/deshoard', component: () => import('@/views/Deshoard') },
      { path: '/article', component: () => import('@/views/Article') }
      // { path: '/home/deshoard', component: () => import('@/views/Deshoard') },
      // { path: '/home/article', component: () => import('@/views/Article') }

    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

2.Layout/index.vue页面展示二级路由

<template>
    <div>
        <div>侧边栏</div>
        <div>
            <div>头部</div>
            <!-- 二级路由出口 -->
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
export default {
  name: 'LayoutPage'

}
</script>

<style></style>

3.App.vue页面为一级路由

<template>
  <!-- <el-row>测试
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row> -->
  <!-- 一级路由出口 就是将来匹配上后的组件展示位置 -->
<router-view></router-view>
</template>
<script>
// export default {

// }
</script>

<style lang="sass">
</style>