Vue 的路由功能允许管理 SPA 中页面导航，将 URL 路径映射到应用程序组件。使用步骤如下：安装 Vue 路由库。创建路由器实例。将路由器安装到 Vue 实例。使用 定义路由链接。使用 显示路由组件。
在 Vue 中使用路由
Vue 路由机制介绍
Vue.js 中的路由是一项内置功能，用于管理单页面应用程序 (SPA) 中的页面导航。它允许开发者创建和管理不同的 URL 路径，这些路径与应用程序的不同组件或视图对应。
如何使用 Vue 路由
立即学习“前端免费学习笔记（深入）”；
1. 安装 Vue 路由库
npm install vue-router@next
2. 创建路由器实例
在 Vue.js 应用程序中创建一个新的 Vue Router 实例。
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
})3. 将路由器实例安装到 Vue 实例
在 Vue.js 实例中安装路由器实例。
new Vue({
router,
el: '#app'
})4. 定义路由链接
在组件中使用
关于我们
5. 显示路由视图
在根组件中使用
高级用法
动态路由
使用冒号 (:) 定义动态路由段，然后在组件中使用 $route.params 访问它们。
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})嵌套路由
将子路由嵌套在父路由中，以创建更复杂的分层导航。
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
children: [
{ path: 'users', component: Users },
{ path: 'products', component: Products }
]
}
]
})路由守卫
使用路由守卫在导航发生前或后执行某些操作。
router.beforeEach((to, from, next) => {
// ...
}) 
