vue 是一种流行的前端开发框架，而 vue router 则是 vue 的一部分，用于管理 vue 应用程序中的路由。vue router 可以使您能够控制浏览器 url 和应用程序中显示的内容。它为 vue 应用程序提供了丰富的交互体验和页面导航功能。在本文中，我们将介绍如何安装和使用 vue router。
创建 vue 项目首先，您需要安装 vue cli 并创建一个新的 vue 项目。在命令行中输入以下命令：
npm install -g @vue/clivue create my-project
上述命令将安装 vue cli 并使用其创建名为 my-project 的 vue 项目。进入您的新项目，并在命令行中输入以下命令来启动应用程序：
cd my-projectnpm run serve
安装 vue router接下来，我们需要安装 vue router。在命令行中输入以下命令来安装 vue router：
npm install vue-router --save
上述命令将通过 npm 安装 vue router 并将其添加到您的项目依赖项中。
创建路由接下来，我们将创建一些路由和视图组件。在 src 目录下创建一个名为 router.js 的文件。在这个文件中，我们将创建一个新的 vue router 实例并导出它。下面是一个简单的例子：
import vue from 'vue'import router from 'vue-router'import home from './views/home.vue'vue.use(router)export default new router({ mode: 'history', routes: [ { path: '/', name: 'home', component: home } ]})
上面的代码创建了一个名为 home 的路由，该路由指向名为 home 的组件。要使用 vue router，您需要在应用程序的入口点中导入该路由。打开 main.js 文件并添加以下代码：
import vue from 'vue'import app from './app.vue'import router from './router'vue.config.productiontip = falsenew vue({ router, render: h => h(app),}).$mount('#app')
上面的代码通过导入 router.js 文件并将其包含在根 vue 实例中来启用路由。
创建视图组件接下来，我们需要创建一些视图组件来显示不同的路由。在 src/views 文件夹中创建一个名为 home.vue 的文件。在这个文件中，添加以下代码：
<template> <div> <h1>welcome to the home page!</h1> </div></template><script>export default { name: 'home'}</script>
上述代码定义了一个简单的 home 组件，该组件只有一个标题，并且没有任何交互或导航。您可以添加更多的组件并为它们创建不同的路由。
添加导航要让用户能够导航到不同的路由和组件，我们需要在应用程序中添加一些导航元素。在 app.vue 文件中添加以下代码：
<template> <div id="nav"> <router-link to="/">home</router-link> <router-link to="/about">about</router-link> </div> <div id="app"> <router-view></router-view> </div></template>
上面的代码添加了两个链接元素，一个指向 home 路由，另一个指向 about 路由。它还包含 <router-view> 元素，该元素将根据当前 url 显示不同的组件。
运行应用程序现在您可以运行应用程序，看看您的路由是否正常工作。在命令行中输入以下命令：
npm run serve
这将在浏览器中启动您的应用程序。您可以使用导航元素导航到不同的路由和组件，并查看 url 如何反映当前的导航状态。
结论
vue router 是一个非常有用的工具，它可以帮助您构建交互性强、具有复杂导航的 vue 应用程序。要使用 vue router，您需要在应用程序中添加该组件并设置路由和导航。希望本文对您有所帮助，祝您在 vue 开发中愉快！
以上就是vue路由器安装教程的详细内容。