Vue Router路由和子路由使用教程【前端开发】

最新推荐文章于 2025-10-29 10:21:34 发布

原创最新推荐文章于 2025-10-29 10:21:34 发布 · 583 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端开发专栏收录该内容

3 篇文章

订阅专栏

安装vue-router，在VScode的终端执行以下的代码：
```
npm install vue-router@4
```

在src/router/index.js中创建路由器，并导出

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'
//定义路由关系
const routes =[
  {path:'/login',component:LoginVue},
  {path:'/',component:LayoutVue,
    //子路由
    children:[
      {path:'/article/category',component:ArticleCategoryVue},
      {path:'/article/manage',component:ArticleManageVue},
    ]
  }
]
//创建路由器
const router = createRouter({
  history:createWebHistory(),
  routes:routes
})
//导出路由
export default router

在vue应用实例中使用vue-router。在main.js文件中导入，如下
```
import router from '@/router'
```
```
app.use(router)
```
在App.vue文件中声明router-view标签，展示组件内容
```
<template>
   <router-view></router-view>
</template>
```

在Login.vue中导入useRouter

import {useRouter} from 'vue-router'
const router = useRouter()

在登陆按钮所触发的登陆函数中添加以下代码
```
router.push('/')
```
使用子路由，实现点击菜单选项实现路由跳转，在Layout.vue文件的容器中加入
```
<el-main>
        <router-view></router-view>
</el-main>
```
在菜单的选项中设置index，注意需要和路由表中的路径保持一致

<el-menu-item index="/article/category">文章分类</el-menu-item>

实现路由重定向，使用redirect

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'
import ArticleCategoryVue from '@/views/article/ArticleCategory.vue'
import ArticleManageVue from '@/views/article/ArticleManage.vue'
//定义路由关系
const routes =[
  {path:'/login',component:LoginVue},
  {path:'/',component:LayoutVue,
    //重定向
   redirect:'/article/manage',
    //子路由
    children:[
      {path:'/article/category',component:ArticleCategoryVue},
      {path:'/article/manage',component:ArticleManageVue},
    ]
  }
]
//创建路由器
const router = createRouter({
  history:createWebHistory(),
  routes:routes
})