Vue Router中两种常见的路由模式

最新推荐文章于 2024-09-25 00:33:27 发布

天天向上撒发着光~

最新推荐文章于 2024-09-25 00:33:27 发布

阅读量3.6k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55726815/article/details/133884118

版权

哈希路由（Hash Mode）和历史路由（History Mode）是Vue Router中两种常见的路由模式，它们在URL的格式和对应的实现方式上有所不同。

1、哈希路由（Hash Mode）

URL格式：在URL中通过使用 # 符号来表示路由路径。例如：https://example.com/#/user/profile.
实现方式：在浏览器中，# 符号后面的内容被视为页面内的一个锚点，不会发送到服务器。Vue Router利用这一特性，在URL后面添加一个 hash（#）来管理路由。在这种模式下，路由的变化不会触发页面的刷新，所有的路由改变都在客户端进行。
优点：在使用哈希模式时，不需要服务器端配置特殊的路由规则，可以方便地在静态服务器上部署和使用。
缺点：URL中的哈希符号可能被视为页面的片段标识，不适合搜索引擎优化（SEO）和某些网站分析工具。

静态服务器：

静态服务器是指专门用来存储和提供静态文件（如 HTML、CSS、JavaScript、图像等）的服务器。与动态服务器相对，静态服务器主要用于向客户端（如浏览器）提供静态资源，不涉及复杂的服务器端运算和动态内容生成。

静态服务器的主要功能是接收客户端的请求，并根据请求的路径返回对应的静态文件。它通常会配置一个基本的文件路径映射关系，将特定的 URL 路径映射到特定的文件或文件夹。

当客户端请求一个静态资源时，静态服务器会根据请求的路径，在指定的文件夹中查找对应的文件或文件夹。如果找到了匹配的静态文件，服务器会将该文件发送给客户端，客户端就可以使用该文件中的内容展示或执行相应的操作。

静态服务器的特点是简单、高效、易于配置和部署。由于静态资源不会经常变化，因此静态服务器不需要针对每个请求进行动态的数据处理，直接返回对应的静态文件就可以了。这使得静态服务器能够提供快速的响应和高并发能力。

静态服务器常用于部署和托管静态网站、单页面应用（如 Vue、React、Angular 等构建的应用）和 CDN（内容分发网络）缓存等场景，为用户提供静态资源的访问。常见的静态服务器有 Nginx、Apache HTTP Server 等。

2、历史路由（History Mode）：

URL格式：URL中不包含 # 符号，采用常规的路径格式。例如：https://example.com/user/profile.
实现方式：在服务器端配置，以确保所有的URL请求返回同一个HTML页面（通常是index.html），然后在客户端使用History API管理路由的变化。这意味着在历史模式下，URL的改变会触发向服务器端发送请求，服务器需要配置以正确处理这些URL并返回相应的HTML。
优点：历史模式使用常规的URL路径，更符合传统网站的形式，并且对搜索引擎有更好的支持，可以进行更好的SEO优化。
缺点：在使用历史模式时，需要服务器端的特殊配置支持，以确保所有路由的URL都返回同一个HTML页面。

问题一： router ===> index.js 中遇到的问题

const createRouter = () => new Router({
  // mode: 'hash', // require service support
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
  // routes: asyncRoutes
})

这段代码是一个函数表达式，它创建了一个Vue Router实例并返回它。

代码中，首先使用new Router()来创建一个新的Vue Router实例，传入一个配置对象作为参数。该配置对象具有以下属性和值：
1、mode: 'history'：指定了路由的模式为"history"模式，这种模式使用浏览器的history.pushState和history.replaceState API来管理路由历史记录。相比之下，"hash"模式会使用URL片段（即哈希值）来模拟路由，例如example.com/#/path。但需要注意的是，在使用"history"模式时，需要服务器的支持来正确处理路由请求，特别是在刷新页面或直接访问路由路径时。

2、scrollBehavior: () => ({ y: 0 })：设置了滚动行为（scroll behavior），该函数用于在路由切换时自动将页面滚动位置重置到顶部（Y轴坐标为0）。

3、routes: constantRoutes：指定了路由的配置数组constantRoutes，该数组包含了应用程序的静态路由配置。在这里，使用了名为constantRoutes的变量来代表静态路由配置。

这段代码通过创建Vue Router实例并传入适当的配置，从而初始化了Vue Router的路由设置。然后，这个Vue Router实例可以被导出并在Vue应用程序中被使用。

const router = createRouter()

// 重写addRoutes
const addRoutes = Router.prototype.addRoutes
Router.prototype.addRoutes = function(newRoutes) {
  router.matcher = createRouter().matcher // 通过重置matcher来重置router
  addRoutes.call(this, newRoutes) // 调用原有方法
}

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

// router.selfaddRoutes = function(params) {
//   router.matcher = new Router().matcher
//   router.addRoutes(params)
// }
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465

export default router

这段代码主要是对Vue Router进行一些扩展和重置的操作。让我们逐行解释：

1. 首先，通过调用`createRouter()`函数创建了一个新的router实例，并将它赋值给`router`常量。

2. 然后，通过重写`addRoutes`方法对Vue Router进行扩展。`addRoutes`是Vue Router中的一个方法，用于动态添加新的路由配置。首先，将原始的`addRoutes`方法保存到`addRoutes`常量中，然后通过重写原有的`addRoutes`方法来扩展其功能。在重写的方法中，先重置了`router.matcher`，通过`createRouter().matcher`创建了一个新的matcher实例，并将其赋值给`router.matcher`。这样可以实现重置router的功能。然后，再调用原有的`addRoutes`方法来添加新的路由配置。

3. 接下来，导出了一个名为`resetRouter`的函数。这个函数在外部可以被调用，用于重置整个router。在函数内部，首先创建了一个新的router实例，并赋值给`newRouter`常量。然后通过将新router的`matcher`赋值给原来的router的`matcher`，实现了对router的重置。

4. 最后，将`router`作为默认导出，这样其他文件可以引入此导出的`router`实例使用。

注释部分的代码被注释掉了，并提供了一个链接，参考这个链接以了解更多详细信息。

总体而言，这段代码的作用是扩展了Vue Router的功能，特别是在添加新路由配置和重置router方面。通过重置matcher来重置router，可以动态改变应用程序的路由配置，并使其立即生效。这对于一些需要动态修改路由的场景非常有用，例如在权限管理和路由导航守卫中。

问题二：vue路由什么情况下需要写redirect重定向？

在以下情况下，我们可能需要在Vue路由中编写重定向（redirect）：

路径重定向：当用户访问一个URL路径时，我们想要将其重定向到不同的路径。这可以用于在应用程序中进行路由重组或更新，使旧的路径重定向到新的路径。例如，我们想要将/home重定向到/dashboard，可以在路由配置中使用redirect来实现这一点。
默认路由：当用户访问应用程序的根路径时，我们可能希望将其重定向到默认的子路径。例如，我们希望将根路径/重定向到/dashboard作为应用程序的默认页面。
条件重定向：根据一些条件，我们希望在特定的情况下将用户重定向到不同的路由路径。这可以根据用户的身份认证、访问权限、用户设备等因素进行条件判断。例如，如果用户未登录，我们可以将其重定向到登录页面；如果用户已经登录，则可以将其重定向到用户个人资料页面。

使用Vue路由的重定向功能可以帮助我们管理和控制路由导航，提供更好的用户体验和应用程序的灵活性。通过编写适当的重定向规则，我们可以确保用户访问的路径得到正确处理，并可以根据需要进行动态的重定向操作。

问题三：什么是路由重定向？

在Vue中，路由重定向是指将一个路由路径重定向到另一个路由路径的行为。当用户访问某个特定的路由路径时，路由重定向将会自动将用户导航到预定义的目标路由路径上。

路由重定向可以用于多种场景，例如：

重定向到默认页面：当用户访问网站的根路径时，可以使用路由重定向将其自动重定向到应用程序的默认页面。
重定向到登录页面：当用户访问需要登录的受保护页面时，可以使用路由重定向将其自动重定向到登录页面，以确保用户在访问受保护内容之前先进行身份验证。
重定向到外部链接：当需要在应用程序中提供一个跳转到外部网页的链接时，可以使用路由重定向将用户导航到指定的外部链接。

在Vue Router中，可以使用路由配置对象的redirect属性来实现路由重定向。下面是一个示例：

const routes = [
  {
    path: '/',
    redirect: '/home'  // 将根路径重定向到 '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }  // 假设这是一个需要登录才能访问的受保护页面
  },
  {
    path: '/external',
    redirect: 'https://example.com'  // 将 '/external' 路径重定向到外部链接 'https://example.com'
  }
]

在上面的示例中，根路径 '/' 被重定向到 '/home'，以确保用户访问应用程序时将会自动加载首页。另外，在 /external 路由路径上的重定向将用户导航到外部链接。

通过使用路由重定向，我们可以灵活地管理和控制用户在应用程序中的导航，以实现更好的用户体验和应用程序流程。

问题四：项目中的Router解析

{
    path: '/redirect',
    component: Layout,
    hidden: true,
    nodeId: 'redirect',
    children: [
      {
        path: '/redirect/:path(.*)',
        nodeId: 'redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

这段代码是一个路由配置，它指定了一个名为"redirect"的路由路径，并将具体逻辑关联到该路径上。

根据这段代码的配置：

- `path: '/redirect'`：表示此路由的路径为"/redirect"，当用户访问这个路径时，将会触发该路由。

- `component: Layout`：表示将一个名为"Layout"的组件与该路由关联。这里的"Layout"组件将会被渲染到指定的<router-view>标签区域。

- `hidden: true`：该属性表示该路由在导航菜单中是否隐藏。如果设置为true，则表示该路由在菜单中不可见。

- `nodeId: 'redirect'`：该属性是一个自定义的标识符，用于在路由配置中唯一标识这个路由节点。

- `children`：表示该路由下还可以包含子路由。

- `path: '/redirect/:path(.*)'`：表示这是一个带有动态参数的子路由。动态参数":path(.*)"将匹配任意的路径。例如，/redirect/some/page将会匹配到这个子路由。

- `nodeId: 'redirect/:path(.*)'`：该属性是一个自定义的标识符，用于在路由配置中唯一标识这个子路由节点。

- `component: () => import('@/views/redirect/index')`：表示当该子路由被匹配时，将加载名为"redirect/index"的组件。这里使用了动态导入(import)语法，组件将在需要时才被异步加载。

总结起来，这段代码的路由配置表示在访问"/redirect"路径时，将会渲染一个名为"Layout"的组件，该组件将包含一个子路由。该子路由带有一个动态参数:path，它将匹配任意路径，并加载名为"redirect/index"的组件。这种配置通常用于实现重定向或动态处理的路由逻辑。

/redirect/index

<script>
export default {
  created() {
    const { params, query } = this.$route
    const { path } = params
    this.$router.replace({ path: '/' + path, query })
  },
  render: function(h) {
    return h() // avoid warning message
  }
}
</script>

$route属性包含了当前路由的信息，其中params是一个对象，包含了路由参数的键值对，而query是一个对象，包含了查询参数的键值对。

接下来，代码从params对象中获取path参数，并在原有的路径前面添加‘/‘，然后与query参数一起构成一个新的路由对象。这个新的路由对象会作为参数传递给$router的replace方法。$router是Vue Router的实例，它提供了一系列的方法和属性用于处理路由操作。

replace方法用于替换当前路由，将浏览历史中的当前记录替换为新的路由记录，而不是新增一条新的历史记录。

通过replace方法将新的路由对象传递给$router，实际上是在页面加载时强制重定向到一个新的路由。这样操作可以用于在页面加载时进行重定向，将URL路径重定向到带有特定参数的新路径。

需要注意的是，在render方法中，代码使用了空的h函数作为返回值，这是为了避免在控制台输出警告信息，因为Vue要求组件必须返回一个有效的渲染结果。在这种情况下，由于组件的主要操作时在created方法中进行的，而不是通过render函数来渲染时间的DOM元素，所以我们返回一个空的渲染结果以避免警告信息的产生。

！菜单管理上路由相关的问题

authButton

handleClick: function() {
      // 按钮操作处理函数
      this.$emit('click', {})
    },
    hasPerms: function(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return this.hasPermission(perms) // & !this.disabled
    },
    hasPermission(perms) {
      let hasPermission = false
      let permission = JSON.parse(this.storage.getLocalStorage('authList'))
      for (var i = 0; i < permission.length; i++) {
        if (permission[i] === perms) {
          hasPermission = true
          break
        }
      }
      return hasPermission
    }

handleClick 方法是一个按钮的操作处理函数。在该函数中，使用 $emit 方法触发了一个名为 "click" 的自定义事件，并传递了一个空的对象作为参数。这意味着在使用该组件的父组件中，可以监听到 "click" 事件，并进行相应的处理。
hasPerms 方法用于根据权限标识和外部指示状态进行权限判断。该方法接收一个参数 perms，表示权限标识。在该方法中，调用了另一个名为 hasPermission 的方法，并将 perms 作为参数传递给它。最终返回 hasPermission 方法的执行结果。
hasPermission 方法用于判断是否具有某个权限。该方法接收一个参数 perms，表示权限标识。通过调用 JSON.parse(this.storage.getLocalStorage('authList'))，获取到存储在本地的 "authList" 数据，并解析成一个数组 permission。然后通过遍历数组，检查是否存在与 perms 相等的权限标识，如果存在则将 hasPermission 设置为 true，并跳出循环。最后返回 hasPermission 的值，表示是否具有该权限。

<authButton label="" 
icon="el-icon-circle-plus-outline" 
circle 
perms="sys:menu:add" 
type="primary" 
@click="handleAdd()" />

在给定的代码中，perms="sys:menu:add" 是一个自定义的权限属性，用于控制按钮的访问权限。它的含义是：只有具有sys:menu:add权限的用户才能访问或执行与该按钮相关的操作。

具体而言，这个权限属性是开发者为了实现权限控制而添加的，在按钮组件上定义了一个perms属性，并将其值设置为sys:menu:add。在页面渲染时，根据用户的权限控制信息，决定是否显示该按钮或者禁用点击事件。

这样做的目的是为了在多用户或多角色的系统中，对不同的用户或角色赋予不同的操作权限。在实际开发中，可以根据自己的业务逻辑和权限设计，在按钮或其他需要进行权限控制的地方使用类似的权限属性。

需要注意的是，上述代码只是一个示例，并不包含完整的权限控制逻辑。具体的权限验证和授权处理需要结合后端的业务逻辑来实现。

自研产品的物联网平台，想要做的是每加入一个项目就加一组管理菜单或是系统，每一组有不同的管理账号，不同项目的管理人员登陆账号可以进入不同的项目，显示该项目的菜单列表，但是所有的项目有一个最大的管理员账号可以看到所有的项目，这个具体应该怎么做？

为实现你所描述的功能，可以通过以下步骤来完成：

1. 数据库设计：首先，你需要设计一个数据库模型来存储项目、管理菜单和管理账号的相关信息。可以创建三个数据库表：项目表、菜单表和账号表。项目表包含项目的基本信息，菜单表包含不同项目的菜单列表，账号表包含管理账号的信息以及其所属的项目。

2. 用户身份验证和授权：在平台中实现用户身份验证和授权机制，确保只有合法的用户可以登录和访问相关项目。为了实现不同项目管理员可以访问其所属项目的菜单，可以使用基于角色的访问控制（Role-Based Access Control, RBAC）模型。其中，账号表中的角色字段可以标识该账号的角色，例如管理员、项目管理员等。平台管理员的账号可以拥有特殊的超级管理员角色。

3. 登录和访问控制：在用户登录时，验证用户身份，并根据其角色和权限来获取相应的菜单列表。当用户成功登录后，根据其角色来决定显示该用户可访问的菜单列表。例如，如果用户是一个项目管理员，那么只显示其所属项目的菜单列表；如果用户是超级管理员，那么显示所有项目的菜单列表。

4. 菜单权限管理：针对不同项目的管理菜单，可以在菜单表中定义一个字段来标识该菜单属于哪个项目。当用户登录时，平台根据其角色和所属项目的权限来获取可访问的菜单列表。在菜单管理的后台，超级管理员可以编辑和分配菜单给不同的项目。

总结：通过以上步骤，你可以在你的物联网平台上实现加入新项目即加一组管理菜单和系统的功能。通过角色和权限管理，不同项目的管理人员可以通过其管理账号登录系统，并且只能访问其所属项目的菜单列表。超级管理员可以看到所有项目的菜单。

需要注意的是，具体的实现步骤和逻辑可能依赖于你所选择的开发框架和技术栈。在实际开发中，你可以根据具体需求和平台特点进行适当的调整和扩展。