【Hello VUE】暴学VUE之代码讲解（九）

最新推荐文章于 2025-07-23 21:57:23 发布

原创最新推荐文章于 2025-07-23 21:57:23 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

vue前端专栏收录该内容

9 篇文章

订阅专栏

本文深入解析vue-router源码，探讨其在Vue.js中的作用及实现细节，包括路由配置、导航控制、链接激活等核心功能。

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

暴学VUE之代码讲解

什么是vue-router
@/router/index.js源码
@/router/index.js源码分析

时间快过去一个月了，博主比较懒惰，现在开始继续更新吧。这一章主要讲解vue-router路由功能。

什么是vue-router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

推荐更加专业的讲解：https://router.vuejs.org/zh/

@/router/index.js源码

import Vue from 'vue'
import Router from 'vue-router'

import Home from '@/views/Home.vue'
import Login from '@/views/login/Login.vue'

Vue.use(Router)

// 登录页面单独写，如下
export const loginRouter = {
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登录'
  },
  component: Login
}

export const appRouter = {
  path: '/',
  name: 'home',
  redirect: '/login',
  component: Home,
  children: [
    {
      path: '/home',
      title: '首页',
      name: 'dashboard',
      component: () => import('@/views/Index.vue')
    },
    //用户管理
    {
      path: 'user/list',
      title: '用户列表',
      name: 'userList',
      component: () => import('@/views/user/UserList.vue')
    },
    {
      path: 'user/info',
      title: '用户信息',
      name: 'userInfo',
      component: () => import('@/views/user/UserInfo.vue')
    },
    //example
    {
      path: 'example/table',
      title: 'TABLE',
      name: 'exampleTable',
      component: () => import('@/views/example/table.vue')
    },
    {
      path: 'example/form',
      title: 'FORM',
      name: 'exampleForm',
      component: () => import('@/views/example/form.vue')
    }

  ]
};

export default new Router({
  mode: 'history',
  linkActiveClass: 'active',
  routes: [loginRouter, appRouter]
})

@/router/index.js源码分析

import

import Vue from ‘vue’
import Router from ‘vue-router’
若只给出vue，axios， vue-router 这样的包名，则会自动到node_modules中加载

import Home from ‘@/views/Home.vue’
import Login from ‘@/views/login/Login.vue’
定义变量Home，Home就代表@/views/Home.vue

Vue.use(Router)

告诉vue编译器，老子要使用路由了，具体的怎么定义，怎么初始化，要看下面的new Router

export

export const loginRouter = {
path: ‘/login’,
name: ‘login’,
meta: {
title: ‘Login - 登录’
},
component: Login
}
定义一个登录页面的路由，单独写。为啥要单独写呢，一般来说登录页面都是不需要session信息检查的，也就是登录信息检查
其中一些定义是
path，这个很重要，所有代码都是直接引用的。例如：next({path:’/login’}); 转向到/login页面
name，定义一个名称
meta，定义一些附加信息
component，这个很重要，这个是path所具体的页面信息

export const appRouter = {
path: ‘/’,
name: ‘home’,
redirect: ‘/login’,
component: Home,
children: [
{
path: ‘/home’,
title: ‘首页’,
name: ‘dashboard’,
component: () => import(’@/views/Index.vue’)
},
… …
};
定义一个应用路由，这里面的路由信息都是登录后才能访问的。首先定义的是根路由"/"，默认让他访问登录后的首页，首页会有检查登录权限的信息，发现没有登录的话，就会直接调整到登录页面 redirect: ‘/login’。定义根路由后，其他的页面都是根路由的子信息，都包含在children: [… …]集合里面。

new router

export default new Router({
mode: ‘history’,
linkActiveClass: ‘active’,
routes: [loginRouter, appRouter]
})
定义new router，并且把new router提供出去，供vue编译器进行调用。值得注意的是，routers节点放置的router的数组。这样定义使得代码更加清晰。