vue 是一种流行的前端开发框架，而 vue router 则是 vue 的一部分，用于管理 vue 应用程序中的路由。vue router 可以使您能够控制浏览器 url 和应用程序中显示的内容。它为 vue 应用程序提供了丰富的交互体验和页面导航功能。在本文中，我们将介绍如何安装和使用 vue router。
- 创建 Vue 项目
首先，您需要安装 Vue CLI 并创建一个新的 Vue 项目。在命令行中输入以下命令：
npm install -g @vue/cli vue create my-project
上述命令将安装 Vue CLI 并使用其创建名为 "my-project" 的 Vue 项目。进入您的新项目，并在命令行中输入以下命令来启动应用程序：
cd my-project npm 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 = false
new 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 开发中愉快！
