// 引入Vue和Vue Router import Vue from 'vue' import VueRouter from 'vue-router' // 导入组件 import Home from './components/Home.vue' import About from './components/About.vue' import Contact from './components/Contact.vue' // 使用Vue Router插件 Vue.use(VueRouter) // 配置路由 const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About }, { path: '/contact', component: Contact } ] }) // 创建Vue实例 new Vue({ router, render: h => h(App) }).$mount('#app')
在这个例子中，我们首先导入了Vue和Vue Router，并使用Vue.use()来安装Vue Router插件。
然后，我们导入了三个组件：Home、About和Contact。
接下来，我们配置了路由，使用路由的path属性来指定URL路径，使用component属性来指定对应的组件。
最后，我们创建了一个Vue实例，将路由对象传递给它的router选项。这样，路由就能在Vue应用中使用了。
在实际的项目中，可以根据需要添加更多的路由，并在路由配置中指定对应的组件。然后，可以在组件中使用router-link来导航到不同的页面。
<template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-link to="/contact">Contact</router-link> <router-view></router-view> </div> </template>
在这个例子中，我们使用router-link标签来创建导航链接。to属性指定了链接的目标URL。router-view标签用于显示当前路由的组件。
这是一个简单的示例，展示了Vue路由的基本用法。在实际的项目中，还可以使用动态路由、嵌套路由、路由守卫等更高级的特性。
