vue路由模式有几种起什么作用

Vue路由模式有两种，分别是Hash模式和History模式，它们的作用是用来实现前端路由。

1. Hash模式：
   Hash模式是通过URL的哈希值来实现路由的。在URL中，哈希值即为"#"后面的部分。例如，http://www.example.com/#/home。
   Hash模式的特点是：当URL中的哈希值发生变化时，页面不会重新加载，而是通过JavaScript监听URL的变化，动态改变页面的内容。

2. History模式：
   History模式则是通过HTML5的History API来实现路由的。在URL中没有哈希值，而是使用正常的路径。例如，http://www.example.com/home。
   History模式的特点是：URL看起来更加美观，没有"#",同时也可以使用浏览器的前进和后退功能。但是History模式需要服务器的支持，在开发环境下需要配置后端路由来避免404错误。

这两种路由模式都可以实现前端的页面跳转和状态管理，根据项目的实际需求选择合适的路由模式。一般来说，如果需要兼容老版本浏览器或者不方便配置后端路由，可以选择Hash模式；如果不考虑兼容性问题，并且有后端服务器的支持，可以选择History模式。

Vue路由模式有两种，分别是Hash模式和History模式。它们的作用是用来实现前端路由的功能，使得应用能够在不刷新页面的情况下实现不同页面之间的切换。

1. Hash模式：
   Hash模式是Vue默认的路由模式。在Hash模式下，URL中会以#符号来表示路由的路径。例如，http://example.com/#/home。当URL的hash值发生变化时，Vue将会根据新的hash值渲染相应的组件。

Hash模式的优点是兼容性好，支持在不同的浏览器中运行。同时，它也可以实现路由的历史记录，用户可以通过浏览器的返回按钮回退到之前的路由状态。

2. History模式：
   History模式是使用HTML5 History API的路由模式。在History模式下，URL中不再包含#符号，直接显示路由路径。例如，http://example.com/home。

History模式的优点是URL更加美观，更符合用户的直观感受。同时，它也提供了一个pushState()方法，可以在不重新加载页面的情况下改变URL，并且可以通过浏览器的前进和后退按钮实现路由的切换。

但是，History模式也有一些缺点。首先，需要服务器的支持，在部署时需要进行一些配置。其次，History模式在一些老旧的浏览器中不支持。

总结起来，Hash模式适用于兼容性要求较高的场景，而History模式适用于现代浏览器环境下的应用。开发者可以根据具体需求选择使用哪一种路由模式。

Vue 路由模式有两种：hash 模式和 history 模式。

1. Hash 模式：

   • 原理：URL 中的 # 符号用来管理路由状态，即将路径放在 URL 的哈希值中。
   • 作用：通过改变 URL 的哈希值，实现页面的切换，不会触发页面的重新加载。
   • 例子：http://example.com/#/home

2. History 模式：

   • 原理：通过 HTML5 History API 中的 pushState() 和 replaceState() 方法来管理路由状态，将路径直接放在 URL 中。
   • 作用：通过改变 URL，实现页面的切换，不会触发页面的重新加载。
   • 例子：http://example.com/home

选择合适的路由模式取决于项目需求和实际情况。下面将分别讲解两种路由模式的操作流程和使用方法。

1. Hash 模式

安装和配置

1. 使用 npm 安装 vue-router：npm install vue-router
2. 在 main.js 中引入并使用 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')
   

创建路由配置

import Home from './components/Home.vue'
import About from './components/About.vue'

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

export default routes

应用路由配置

在 App.vue 中使用 <router-view> 来展示对应的组件，使用 <router-link> 来切换路由。

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

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

路由导航

通过调用 this.$router.push() 方法来导航到指定的路由：

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

获取路由参数

通过 $route.params 来获取路由参数：

console.log(this.$route.params.id)

2. History 模式

安装和配置

1. 使用 npm 安装 vue-router：npm install vue-router
2. 在 main.js 中引入并使用 vue-router：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)
   
   const router = new VueRouter({
     mode: 'history',
     routes: [
       // 路由配置
     ]
   })
   
   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app')
   

创建路由配置（同 Hash 模式）

应用路由配置（同 Hash 模式）

路由导航（同 Hash 模式）

获取路由参数（同 Hash 模式）

总结：

• Hash 模式适合简单的页面切换，兼容性好，但 URL 中会带有 # 符号；
• History 模式更加美观，但需要服务器配置支持，在使用时要注意处理 404 页面的情况。