Vue路由笔记

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
    },
  },
]