vue-router中的hash和history

vue-router中的hash模式和history模式是两种不同的路由模式。

hash模式会在URL中添加一个#号，例如http://example.com/#/about。这种模式在不支持HTML5 History API的浏览器中可以正常工作。

history模式会把URL变成真实的路径，例如http://example.com/about。这种模式需要服务端的配合，因为所有的路由请求都会被代理到同一个HTML文件上。

默认情况下，vue-router使用hash模式。但可以通过配置来改变它的行为。

相关问题

vue-router hash模式

Vue Router 是 Vue.js 官方的路由管理器，可以用来实现单页应用的路由功能。hash 模式是 Vue Router 的一种路由模式，它使用 URL 的 hash（即 # 符号后面的部分）来模拟路由，不会触发浏览器的页面刷新。

在使用 Vue Router 时，默认情况下会使用 hash 模式。你可以在创建 Vue Router 实例时，通过配置 `mode: 'hash'` 来启用 hash 模式。例如：

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

Vue.use(VueRouter);

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

new Vue({
  router,
  // ...
}).$mount('#app');

在 hash 模式下，路由会被解析为 `/#/path` 的形式，其中 path 是你定义的路由路径。当 URL 的 hash 改变时，Vue Router 会根据配置的路由表，动态渲染对应的组件。

需要注意的是，hash 模式不支持服务端渲染，如果你需要进行服务端渲染，请使用历史模式（history mode）。

希望这个回答对你有所帮助！如果你有更多问题，请继续提问。

vue-router history模式具体如何实现

Vue-router提供了两种路由模式：hash模式和history模式。

hash模式是通过URL中的#号来实现的，可以在URL中添加hash值来实现路由切换，不会刷新页面。hash模式的优点是兼容性好，不需要服务器端的支持，缺点是URL中会出现#号，不够美观。

history模式是通过HTML5的history API来实现的，可以实现真实的URL，不会出现#号，但是需要服务器端的支持。history模式的优点是URL美观，缺点是兼容性不好，需要服务器端的支持。

要使用history模式，需要先确保服务器端已经做好了相关的配置，将所有的路由都指向index.html，然后在Vue-router中进行相关的配置。

具体实现步骤如下：

1. 在Vue项目中安装Vue-router：npm install vue-router --save

2. 在router/index.js中进行相关的配置，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history', // 路由模式，使用history模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

3. 在main.js中引入router，并挂载到Vue实例中，如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router, // 将router挂载到Vue实例中
  render: h => h(App),
}).$mount('#app')

4. 在App.vue中使用router-link和router-view进行路由跳转和组件渲染，如下：

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

<script>
export default {
  name: 'App'
}
</script>

这样就可以使用history模式进行路由跳转了。