vue的路由模式及区别?示例代码（vue中的路由模式）

Vue.js路由有两种模式：hash（#）和history（HTML5）。

1：Hash模式（默认）：在URL中加入“#”符号来实现路由，也叫哈希路由。在hash模式下，单页应用程序只会有一个HTML页面和多个组件，当路由地址发生变化时，只需要重新渲染组件即可，不需要重新加载整个页面。

示例代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
  }
]
const router = new VueRouter({
  mode: 'hash',
  routes
})
export default router

2：History模式：利用HTML5的History API实现路由，相比于hash模式，history模式的URL更加美观。在history模式下，单页应用程序必须有一个后端支持，用来处理URL请求，否则在直接访问该URL时会返回404错误。

示例代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
  }
]
const router = new VueRouter({
  mode: 'history',
  routes
})
export default router

总结一下，hash模式和history模式的主要区别在于URL形式和浏览器兼容性。需要注意的是，在使用history模式时，需要服务器端进行相应的配置，将所有路由请求指向同一个HTML页面，否则会导致404错误

Vue.js提供了两种路由模式：hash模式和history模式。主要区别在于URL的表现形式和浏览器的兼容性。

1：Hash模式

hash模式是Vue.js默认的路由模式，它在URL中使用#来作为路由地址的前缀，例如：http://localhost:8080/#/home。hash模式可以避免浏览器向服务器发送请求，因此更快。另外，由于#的存在，浏览器可以很好地解析该URL，因此兼容性也很好。

2：History模式

history模式在URL中不使用#，而是使用真正的URL，例如：http://localhost:8080/home。history模式需要服务器的支持，因为它会向服务器发送请求。另外，由于浏览器的兼容性问题，history模式可能会在某些旧版本的浏览器中导致问题。

下面是一个示例代码展示如何使用Vue.js的路由功能

// 引入Vue.js和Vue-Router
import Vue from 'vue'
import VueRouter from 'vue-router'
// 安装VueRouter插件
Vue.use(VueRouter)
// 引入组件
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
// 定义路由
const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/contact',
    component: Contact
  }
]
// 创建router实例
const router = new VueRouter({
  mode: 'hash', // 路由模式
  routes: routes
})
// 创建vue实例
new Vue({
  router: router
}).$mount('#app')

在这个示例代码中，我们首先使用import关键字引入Vue.js和Vue Router模块，并使用Vue.use()方法安装VueRouter插件。然后我们定义了三个组件：Home、About和Contact。接着，我们定义了一个路由表，包含了三个路由的路径和对应的组件。最后，我们创建了一个VueRouter实例，并将路由表注册到这个实例中。最后，我们将这个router实例传递给Vue实例，在Vue实例的$mount()方法中指定应用程序的挂载点。

Vue.js提供了两种路由模式：哈希模式和历史模式。

1：哈希模式：默认模式，URL中带有#符号，如http://example.com/#/home。这种模式适用于SPA单页应用，可以使页面切换更加流畅，不会刷新页面，因为URL的改变会被路由拦截。

2：历史模式：URL中没有#符号，如http://example.com/home。这种模式适用于多页应用，可以使URL更加友好，但是在页面刷新时会向服务器发起请求，需要在服务器端配置路由，否则会出现404错误。

下面是一个使用哈希模式的Vue.js路由示例代码

//导入Vue.js和Vue Router插件
import Vue from 'vue'
import VueRouter from 'vue-router'
//注册VueRouter插件
Vue.use(VueRouter)
//定义组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const Contact = { template: '<div>Contact</div>' }
//定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
]
//创建路由对象
const router = new VueRouter({
  mode: 'hash',
  routes: routes
})
//创建Vue.js实例
new Vue({
  el: '#app',
  router: router
})

这个代码展示了如何使用Vue.js路由模块。首先导入Vue.js和Vue Router插件，然后注册Vue Router插件。接着定义三个组件：Home、About和Contact。定义路由对象，包含三条路由规则。创建Vue Router实例，并传入路由对象。最后创建Vue.js实例，并将路由对象传递给它。在应用程序的HTML结构中，可以通过<router-link>标签进行路由跳转，路由组件则会根据URL自动匹配展示相应的组件。