vue router怎么用

Vue Router是Vue.js官方的路由管理器，用于构建SPA（Single Page Application）应用程序。以下是Vue Router的基本使用方法：

1. 安装Vue Router

首先，需要安装Vue Router。可以使用npm或者yarn安装，命令如下：

npm install vue-router

或者

yarn add vue-router

2. 创建Vue Router实例

在Vue应用程序中，需要先创建Vue Router实例，代码如下：

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

Vue.use(VueRouter)

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

在创建Vue Router实例时，需要设置路由模式（mode）和路由表（routes）。

3. 注册Vue Router实例

将Vue Router实例注册到Vue应用程序中，代码如下：

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

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

在Vue应用程序中，需要将Vue Router实例传递给根Vue实例。

4. 定义路由表

在路由表中，需要定义每个路由的路径、名称和组件。例如：

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

其中，path表示路由路径，name表示路由名称，component表示路由对应的组件。

5. 在组件中使用路由

在组件中使用路由，需要使用Vue Router提供的组件和方法，例如：

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

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

其中，router-link组件用于生成路由链接，router-view组件用于显示路由对应的组件。