以下是一个简单的 Vue Router 的例子：
1. 安装 Vue Router： 在项目中安装 Vue Router。
npm install vue-router
2. 在 Vue 项目中使用 Vue Router： 在入口文件中配置和使用 Vue Router。
// main.js
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
Vue.config.productionTip = false;
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = new VueRouter({
routes
});
new Vue({
render: h => h(App),
router
}).$mount('#app');
3. 在组件中使用路由： 在组件中使用 <router-link> 进行导航，使用 <router-view> 渲染匹配的组件。
<!-- App.vue -->
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<!-- Home.vue -->
<template>
<div>
<h2>Home</h2>
<p>Welcome to the home page!</p>
</div>
</template>
<!-- About.vue -->
<template>
<div>
<h2>About</h2>
<p>This is the about page.</p>
</div>
</template>
在上述例子中，我们定义了两个路由：/ 对应 Home 组件，/about 对应 About 组件。在 App.vue 中，我们使用 <router-link> 创建导航链接，用 <router-view> 渲染匹配的组件。
这只是一个简单的示例，Vue Router 还支持更多高级的功能，例如嵌套路由、路由参数、路由守卫等。详细信息可以查阅 Vue Router 的[官方文档](https://router.vuejs.org/)。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4815/Vue