在单页应用（SPA）开发中，前端路由起着至关重要的作用。它能够实现页面之间的切换、导航和传递参数等功能，使得用户能够在浏览器中无刷新的情况下获得不同的页面内容和交互。Vue Router 是 Vue.js官方的路由管理器，它基于Vue.js的核心库，可以轻松地实现前端路由功能。
什么是Vue Router？
Vue Router 是 Vue.js 的官方路由管理器。它提供了一种方式来映射应用的 URL 到 Vue 组件，并且可以通过各种方式导航、传参。Vue Router 可以帮助我们构建更好的单页应用。
安装Vue Router
在开始使用Vue Router之前，首先需要确保已经安装好了Vue.js。可以从官网（https://vuejs.org）上下载最新版的Vue.js。
安装Vue Router可以通过npm或者CDN的方式来进行。
通过npm安装
可以通过使用npm包管理工具安装Vue Router。
npm install vue-router
通过CDN引入
也可以通过CDN的方式引入Vue Router。
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
使用Vue Router
使用Vue Router非常简单，只需要按照以下步骤即可。
引入Vue Router
在main.js（或者其他入口文件）中引入Vue和Vue Router。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
定义路由
在引入Vue和Vue Router之后，需要定义路由配置。我们可以在一个单独的文件中创建一个路由配置对象。
// routes.js
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
const routes = [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
{
path: '/contact',
component: Contact
}
]
export default routes
创建路由实例
在main.js中创建一个Vue Router实例，并传入路由配置。
// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const router = new VueRouter({
routes
})
new Vue({
router
}).$mount('#app')
使用路由
在Vue组件中，可以通过<router-link>组件来创建导航链接，通过<router-view>组件来显示路由对应的组件。
<!-- Home.vue -->
<template>
<div>
<h1>Home</h1>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<!-- App.vue -->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
导航
可以通过编程的方式导航到某个路由。
// 通过名称导航
this.$router.push({ name: 'about' })
// 通过路径导航
this.$router.push('/about')
// 带参数的导航
this.$router.push({ path: '/user/1' })
动态路由
可以使用动态路由来匹配不同的URL，从而实现传参和根据参数来显示不同的内容。
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
// User.vue
<template>
<div>
<h2>User {{ $route.params.id }}</h2>
</div>
</template>
总结
Vue Router 是 Vue.js 官方的路由管理器，可以轻松地实现前端路由功能。使用Vue Router可以实现单页应用（SPA）的开发，帮助我们构建更好的用户体验。在使用Vue Router时，需要引入并安装Vue Router，定义路由配置，创建路由实例，并在Vue组件中使用<router-link>和<router-view>来实现导航和显示路由对应的组件。通过编程的方式可以实现页面之间的切换和传递参数等功能。利用动态路由可以匹配不同的URL，根据参数来显示不同的内容。
本文来自极简博客，作者：烟雨江南，转载请注明原文链接：利用Vue Router实现前端路由：
