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