ELRIWebSystem/Learning/vue/4.Vue的路由功能.md

vue的路由功能

1、Router的概念

​ 路由的意思大致和导航功能差不多，通过路由（router）功能，我们可以输入不同的路径访问不同的html页面。通过vscode查看vue - ex2的源码，我们可以看到在路径src\router\index.js中，配置路由参数。

​ 在index.js我们可以看到代码：

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

Vue.use(Router)

export default new Router({
  // mode有两种,分别为hash模式和history模式,hash模式路径的中间有个#符号
  // hash模式可以输入任何路径都不会出错，history模式需要自行处理404等异常
  mode: 'history',        
  routes: [
    {
      path: '/',
      component: () => import('@/components/HelloWorld'),
    },
    {
      path: '/NewPage',
      component: () => import('@/components/NewPage'),
    }
  ]
})

​ 当我们在本地输入http://localhost:8080/时，会调用HelloWorld.vue进行渲染。当输入http://localhost:8080/NewPage时，会调用NewPage.vue进行渲染。

2、Router模式

​ 在Vue.js应用中，带有#的路径是使用了Hash 模式的路由。Vue Router默认使用的是Hash模式，这样的URL形式为http://localhost:8082/#/。

​ Hash 模式的工作原理是将路由的路径放在 URL 的哈希部分（即 # 号后面），而不会导致浏览器向服务器发送请求。这使得单页应用（SPA）能够在前端实现路由，而不需要后端的特殊配置。Hash 模式的优点之一是它在不同的服务器设置下都能工作，因为哈希部分不会被包括在 HTTP 请求中，不会被发送到服务器。

​ Vue Router提供两种模式，即Hash 模式和History 模式。

• Hash 模式（默认）： 在 Hash 模式下，URL 中的 # 后面的内容被视为路由的一部分。这使得 Vue.js 可以监听 URL 中的变化，并作出相应的路由跳转。
• History 模式： 在 History 模式下，URL 中不再需要 #，而直接使用真实的 URL 路径。这需要后端服务器的支持，以确保在直接访问这些URL时能够正确返回你的应用。

要使用 History 模式，需要在创建 Vue Router 实例时指定模式：

javascriptCopy code// router/index.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    // 路由配置
  ]
});

​ 但要注意，使用 History 模式时，需要在服务器上进行相应的配置，以确保在直接访问页面时能够正确处理这些路由。如果直接访问一个 History 模式下的 URL，而服务器没有相应的配置，可能会导致 404 错误。在开发环境中，通常不需要进行特殊的服务器配置，因为开发服务器会帮助处理这种情况。