vue中路由的实现方式

Vue中路由的实现方式有两种：hash模式和history模式。

1. hash模式

在hash模式下，路由信息会保存在URL的hash中，以#号开头。例如：http://localhost:8080/#/home。Vue Router会监听URL的变化，当URL的hash发生变化时，会根据新的hash值切换到对应的组件。

2. history模式

在history模式下，路由信息会保存在浏览器的历史记录中。例如：http://localhost:8080/home。Vue Router会使用HTML5的History API来实现路由切换。在history模式下，URL中不再需要#号，看起来更加清晰。

在Vue中使用路由，需要引入Vue Router，然后定义路由规则和对应的组件。最后在Vue实例中挂载Vue Router。

例如：

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',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

这里定义了两个路由规则，一个是/，对应的组件是Home，另一个是/about，对应的组件是About。最后在Vue实例中挂载Vue Router。

例如：

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

Vue.config.productionTip = false

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

在模板中使用路由链接和路由视图，例如：

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

<router-view></router-view>