深入详解Vue路由 vue router

什么是Vue路由？

Vue路由是Vue.js框架中具备路由功能的插件包，它可以帮助我们构建单页面应用程序（SPA）。Vue路由提供了机制来在JavaScript之间做导航，这些JavaScript是通过不同URL地址访问的不同页面。Vue路由使用Vue组件系统将不同的页面与路径相匹配。路由器是Vue.js应用程序的核心部分，因为它管理应用程序中用户与不同页面的交互。在创建Vue.js应用程序时，您可以选择使用Vue.js路由或选择其他基于Javascript的框架。

const routes = [
 { path: '/', component: Home },
 { path: '/about', component: About }
]

如何使用Vue路由？

Vue路由可以通过Vue.js CLI自动生成进行安装以及配置。Vue.js CLI是一种命令行界面，它提供了一些工具来帮助我们在Vue.js应用程序中创建或配置依赖项并进行开发。安装Vue路由并将其添加到Vue.js应用程序中可以轻松实现SPA的路由。下面是安装Vue路由及其基本配置的代码。

npm install vue-router --save

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
 routes
})

Vue路由常用方法是什么？

在Vue路由中，有几种常见的方法可用于导航到不同的页面。例如，当用户点击菜单项或按钮时，我们可能需要将Vue组件设置为默认路由或导航到特定页面，这些方法是非常有用的。

//push方法
this.$router.push('/about')

//replace方法
this.$router.replace('/about')

//go方法
this.$router.go(-1)

Vue路由中的路由守卫是什么？

路由守卫是Vue路由提供的一种机制，用于在导航到路由之前或导航完成后运行代码。路由守卫使得我们能够检查权限，重定向到其他页面或确保特定路由组件已加载。

const router = new VueRouter({
 routes
})

router.beforeEach((to, from, next) => {
 // 确认用户已登录
 if (!user.loggedIn && to.path !== '/login') {
  next('/login')
 } else {
  next()
 }
})