vue 路由使用实例

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以非常方便地用于构建单页应用程序（SPA）。

以下是一个简单的 Vue 路由使用实例：

1. 安装 Vue Router

npm install vue-router

2. 在 main.js 文件中引入 Vue Router 并注册

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

Vue.use(VueRouter)

3. 创建路由实例并配置路由

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

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

const router = new VueRouter({
  routes // short for `routes: routes`
})

4. 在 Vue 实例中使用路由

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

5. 在模板中使用路由

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

以上是一个简单的 Vue 路由使用实例，包括了基本的路由配置、在 Vue 实例中使用路由和在模板中使用路由。您可以根据您的需求进一步配置和使用 Vue Router。