在Vue.js中，Vue Router是一个常用的插件，它允许我们构建单页应用程序（SPA），通过不同的URL路径来展示不同的组件内容，从而实现页面的无刷新切换。本篇文章将带你入门Vue路由，通过单路径配置轻松实现页面导航。
1. 安装Vue Router
在使用Vue Router之前，首先需要将其安装到你的项目中。如果你使用的是Vue CLI创建的项目，Vue Router可能已经包含在内。否则，你可以通过以下命令进行安装：
npm install vue-router
# 或者
yarn add vue-router
2. 创建Vue Router实例
在你的项目中，创建一个名为
router.js
或
index.js
的文件，并在其中创建Vue Router的实例。以下是基本配置：
import Vue from ‘vue’;
import Router from ‘vue-router’;
import Home from ‘./views/Home.vue’;
import About from ‘./views/About.vue’;
Vue.use(Router);
const router = new Router({
mode: ‘history’, // 设置为history模式，以避免URL中出现#符号
routes: [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: About
}
]
});
export default router;
这里我们定义了两个路由：首页（
/
）和关于页面（
/about
）。每个路由都包含
path
、
name
和
component
三个属性。
path
是路由的路径，
name
是路由的名称，用于在组件内部通过
this.$route.name
来访问，
component
是路由对应的组件。
3. 在Vue应用中使用Vue Router
在
main.js
或
main.ts
文件中，引入刚刚创建的
router
实例，并将其传递给Vue实例：
import Vue from ‘vue’;
import App from ‘./App.vue’;
import router from ‘./router’;
new Vue({
el: ‘#app’,
router,
render: h => h(App)
});
现在，你的Vue应用已经集成了Vue Router。
4. 使用
进行页面跳转
在Vue组件中，你可以使用
标签来创建跳转链接，它最终会被渲染为一个
标签。以下是如何在
Home
组件中使用
：
首页
当点击“关于我们”链接时，会跳转到
/about
路径对应的
About
组件。
5. 使用
展示组件
在Vue应用的根组件中，你需要使用
来展示当前路由对应的组件。例如，在
App.vue
中：
当访问不同的路由时，
会根据当前路由展示相应的组件。
通过以上步骤，你就可以在Vue应用中使用Vue Router实现简单的页面导航了。Vue Router还提供了丰富的功能和高级用法，例如路由守卫、嵌套路由、动态路由等，随着你的深入学习，你将能够构建更加复杂和强大的单页应用程序。