创建 Vue Router 带有哈希历史模式

Vue Router 是 Vue.js 的官方路由管理库，它允许您用组件描述应用程序状态，然后将 URL 映射到这些组件。在传统的固定 URL 中，您通常使用的是基于 HTML5 历史记录 API 的历史模式。但是，如果您的应用程序托管在不支持 HTML5 历史记录 API 的服务器上，或者您的应用程序需要支持 IE9 和更低版本的 IE，则需要使用哈希（# ）模式。

创建路由器

要使用 Vue Router，我们首先需要安装它。我们可以使用 npm 安装它，如下所示：

npm install vue-router

然后，我们可以在 main.js 中引入 Vue 和 Vue Router，并创建一个新的 Vue Router 实例：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 路由配置项
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在此示例中，我们使用 Vue.use() 方法来安装 Vue Router 插件，然后创建了一个新的 Vue Router 实例，并将其作为配置项传递给 Vue 实例。

我们还可以指定在路由器中使用的模式。对于哈希模式，我们应该将模式设置为 'hash'，如上所示。

声明路由

我们可以在 Vue Router 实例的 routes 配置中声明我们的路由。每个路由都应该映射到一个组件。在以下示例中，我们定义了两个路由：

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

const router = new VueRouter({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

此处通过定义一个变量 Home，和一个变量 About 来设置路由，当我们将 URL 更改为 '/' 时，会显示 Home 组件，当我们将 URL 更改为 '/about' 时，会显示 About 组件。

跳转路由

现在我们已经声明了路由，让我们看看如何在我们的应用程序中导航到它们。我们可以使用 <router-link> 组件来实现跳转路由的功能。该组件会渲染成一个 <a> 标签，这个 <a> 标签会自动地指向正确的 URL：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

我们还可以使用编程式导航来实现路由跳转。我们可以在 Vue Router 实例中访问 $router 对象来访问路由器的方法。例如，要将用户从当前路由导航到新路由，我们可以使用 $router.push() 方法:

this.$router.push('/about')

总结

Vue Router 是一个非常强大和灵活的路由管理库，它允许我们用组件描述应用程序状态，然后将 URL 映射到这些组件。在此介绍中，我们展示了如何创建一个带有哈希历史模式的 Vue Router，如何声明路由，以及如何在我们的应用程序中访问和跳转路由。