Vue的路由实现：hash模式和 history模式

克里斯蒂亚诺更新

于 2024-04-16 19:11:51 发布

阅读量325

点赞数 9

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_36152801/article/details/137836393

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

在 Vue 中，路由的实现通常使用 Vue Router 库。Vue Router 提供了两种路由模式：哈希模式（Hash mode）和历史模式（History mode）。

哈希模式（Hash mode）

在哈希模式中，路由器会使用 URL 中的哈希值（#）来模拟一个完整的 URL，当 URL 的哈希值发生变化时，路由器会根据哈希值来匹配路由。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Router - Hash Mode</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>

<div id="app">
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  
  <router-view></router-view>
</div>

<script>
const Home = { template: '<div>Home Page</div>' };
const About = { template: '<div>About Page</div>' };

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes,
  mode: 'hash' // 使用哈希模式
});

const app = new Vue({
  router
}).$mount('#app');
</script>

</body>
</html>

在这个例子中，我们创建了一个简单的 Vue 应用，并使用了 Vue Router。路由器的模式被设置为哈希模式 mode: 'hash'。当用户点击页面上的链接时，URL 的哈希值会发生变化，路由器会根据哈希值来匹配相应的路由，并渲染对应的组件。

历史模式（History mode）

在历史模式中，路由器会使用浏览器的 History API 来管理 URL，并且不会使用哈希值。这使得 URL 看起来更加友好，没有 # 符号。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Router - History Mode</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>

<div id="app">
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  
  <router-view></router-view>
</div>

<script>
const Home = { template: '<div>Home Page</div>' };
const About = { template: '<div>About Page</div>' };

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes,
  mode: 'history' // 使用历史模式
});

const app = new Vue({
  router
}).$mount('#app');
</script>

</body>
</html>

在这个例子中，路由器的模式被设置为历史模式 mode: 'history'。当用户点击页面上的链接时，URL 不再包含哈希值，而是使用正常的 URL 路径。这样的 URL 看起来更加干净和语义化。但需要注意的是，使用历史模式时，需要服务器端的配置来支持，以确保在用户刷新页面或直接访问某个路由时，服务器正确地返回相应的页面。

克里斯蒂亚诺更新

关注

9
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的路由实现：hash模式和 history模式

在 Vue 中，路由的实现通常使用 Vue Router 库。Vue Router 提供了两种路由模式：哈希模式（Hash mode）和历史模式（History mode）。
复制链接

扫一扫