12.前端路由VueRouter 课件.pdfVIP

前端路由VueRouter

教学内容

l第一节VueRouter安装与使用

l第二节参数传递

l第三节子路由

l第四节导航守卫

VueRouter安装与使用

nVue路由vue-router是官方的路由插件，能够轻松的管理SPA项目中组件的切

换。

nVue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和

组件映射起来

nvue-router目前有3.x的版本和4.x的版本，vue-router3.x只能结合vue2

进行使用，vue-router4.x只能结合vue3进行使用

n安装：npminstallvue-router@4

导航守卫

nvue-router提供的导航守卫主要用来拦截导航，让它完成跳转或取消。

nto：Route：即将要进入的目标路由。

nfrom：Route：当前导航正要离开的路由。

nnext：在守卫方法中如果声明了next形参，则必须调用next()函数，否则不允

许用户访问任何一个路由

n直接放行：next()，强制其跳转到登录页面：next(/login)