# `vue`的路由功能

#### 1、Router的概念		

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

<img src="http://logzhan.ticp.io:30000/logzhan/PictureHost/raw/branch/main/ELRIWebSystem/Learning/vue/vue-helloworld/vue_route_config.png" style="zoom:67%;" />

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

```javascript
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 实例时指定模式：

```javascript
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 错误。在开发环境中，通常不需要进行特殊的服务器配置，因为开发服务器会帮助处理这种情况。