Vue-Cli路由笔记
1.配置路由
{
path:'/',//如果路径是如 http://localhost那么默认打开的地址就执行这个路由页面
component:'Home'//定义该路由跳转的页面
}
{
path:'/Login',//当地址栏路径为 http://localhost/Login 执行该路由
component:'Login'//定义该路由跳转的页面
}
{
path:'/Login',//当地址栏路径为 http://localhost/Login 执行该路由
//懒加载定义该路由跳转的页面 只有执行这个路由才会加载页面
component:()=>import('@/views/Login')
},
{
path:'/Login',//当用户访问倒这个path的路由
redirect:'/Home'//会被重定向倒已有路由中的 path 为 '/Home' 的路由执行
}
{
path:'/Admin',//父路由
component:'Admin',
children:[{//定义子路由
path:'Login',//注意子路由的开头不加斜杠 /
component:'Login'//定义该路由跳转的页面
}]
//访问时地址栏路径为 http://localhost/Admin/Login
}
import Vue from 'vue'
//引入vue-router 如果没有安装需要安装
import VueRouter from 'vue-router'
//引入视图中的页面
import Login from '@/views/Login'
import Home from '@/views/Home'
Vue.use(VueRouter)) //调用Vue.use()函数,把VueRoouter安装为Vue的插件
//定义路由数组
const routes = [
{
path:'/',//如果路径是如 http://localhost那么默认打开的地址就执行这个路由页面
component:'Home'//定义该路由跳转的页面
},
{
path:'/Login',//当地址栏路径为 http://localhost/Login 执行该路由
//懒加载定义该路由跳转的页面 只有执行这个路由才会加载页面
component:()=>import('@/views/Login')
},
{
path:'/Admin',//父路由
component:'Admin',
children:[{//定义子路由
path:'Login',//注意子路由的开头不加斜杠 /
component:'Login'//定义该路由跳转的页面
}]
//访问时地址栏路径为 http://localhost/Admin/Login
}
]
coonst router=new VueRouter(//创建路由的示例对象
{
// 路由模式
mode: 'history',
routes
})
export default router //导出路由的实例对象
2.路由守卫(官方称导航守卫)
路由守卫就是路由跳转过程中的一些钩子函数,这个过程中触发的这些函数能让你操作一些其他的事儿的时机。整体过程为
异步
-
全局路由守卫
//当一个路由被触发时,触发前置守卫, //to: Route: 即将要进入的目标 路由对象 //from: Route: 当前导航正要离开的路由 //next: Function: 一定要调用该next方法,否则路由不向下执行。 router.beforeEach((to, from, next) => { // to 要到哪个路由去 // from 离开的是哪个路由 // next 可选 是否继续执行 没有则卡在当前位置 //如果在 next()执行之前 返回 false 可以取消跳转 //return false next() })
使用较少 这和 router.beforeEach 类似,因为它在 每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。 router.beforeResolve 是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置
//作用:路由跳转之后触发 //场景:可以让路由跳转之后让对应的页面的网页标题改变 //后置守卫 不接受第三个参数 next() router.afterEach((to,from)=>{ document.title = '默认标题' })
-
组件路由守卫
beforeRouteEnter(to, from,next) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 this ! // 因为当守卫执行时,组件实例还没被创建! next(vm => { // 可通过 vm 访问组件实例 console.log('目标组件实例',vm) }) }
beforeRouteUpdate(to, from) { // 在当前路由改变,但是该组件被复用时调用 // 对于在 /users/1 和 /users/2 之间兄弟路由跳转的时候, // 由于会渲染同样的 UserDetails 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 这时组件已经挂载好了,可以访问组件实例 this }
- 离开该组件的路由调用时
// 离开守卫 通常用来预防用户在还未保存修改前突然离开。可以通过返回 false 来取消 // 可以访问组件实例 this beforeRouteLeave (to, from) { const answer = window.confirm('是否已保存?') if (!answer) return false }
-
独享路由守卫
// 可以直接在路由配置上定义 beforeEnter 守卫
// 只有在 从一个不同的 路由导航时,才会被触发
// 而不是调用该路由的属性触发,如params、query
const routes = [
{
path: '/users',
component: User,
beforeEnter: (to, from) => {
return false
},
},
]