$router和$route的区别

关于这俩的区别 之前在项目上遇到过也查询过也用过 但是不用的时候转身就又忘记了
在此做个记录 加深自己的记忆

router对象

页面引入如下

//安装之后引入
import vueRouter from 'vue-router'
Vue.use(vueRouter)
//使用
export default new Router({//路由实例对象
    //具体的路由对象
    routes: [{
    	path:'/home',//路由路径
    	name:"home"//路由名称
    	//...其他配置
    }]
})

访问的时候可以在地址栏后面输入 /home 就能展示home这个路由对应的组件内容
$router是vueRouter的一个对象，通过Vue.use(vueRouter) 和new Router构造函数 能够得到一个router的实例对象

这个对象是一个全局的对象 它包含了很多属性和方法
在任何一个页面上打印this.$router 会有类似下面这样的打印

1.页面声明方式

当你想在一个页面嵌套子路由，并且不跳转页面的时候，可以使用这种方法 子页面就会渲染在router-view的地方

//路由入口 --点击之后跳转到to对应的路由页面 to的配置可以是{name:"路由名称"} 也可以是{path:"路由路径"}  也可以带参数
<router-link :to="...">
//视图出口 --直接将路由配置的子路由页面显示在当前页面上 不需要跳转
<router-view></router-view>

2.常用方法解释

• $router.push()
  向history栈中添加一个路由并切换到该路由，就像window.location.href跳转页面的时候也会像window的history对象中添加一个地址是一样的意思
  用法如下

this.$router.push('/home');
或者
this.$router.push({path:"/home"})
或者
this.$router.push({name:"home"})
也可以加参数
this.$router.push({path:"/home",query:{userId:'xxx'}})//path的传参方式是query
或者
this.$router.push({name:"home",params:{userId:'xxx'}})//name的传参方式是params
或者
this.$router.push({path:'/home/${userId}'})//这种需要在配置的时候 path配置为path: /home/:userId

• $router.replace({path:’/newHome’});//替换路由，没有历史记录
• $router.back() // 后退一步记录，等同于 history.back()
• $router.go(-1) // 后退一步记录，等同于 history.back()
• $router.go(1) // 在浏览器记录中前进一步，等同于 history.forward()

3.路由实例对象的导航钩子函数

全局路由拦截-进入页面前执行 对所有的路由对象都有用

//一般用来处理一些全局的需要做跳转判断的逻辑  比如 没有登录就无法访问该页面的逻辑 就可以在这里统一处理（具体逻辑根据需要跳转）
router.beforeEach((to, from, next) => {
    if (localStorage.getItem("isLogin") == "true") {//比如此处判断如果已经登录直接下一步
   		next();
	}else{//如果没有登录//只允许直接访问这三个路由页面
   		if (to.path == '/login' || to.path == '/register' || to.path == "/home") {
            next();
        } else {//其他所有页面都需要先登录才能访问 没有登录就提示需要登录并跳转到登录页面
            alert('您还没有登录，请先登录');
            next({ path: '/login', query: { toPath: to.path}});
        }
    }
})

每个守卫方法接收三个参数：

• to: Route对象 即将要进入的目标 路由对象
• rom: Route对象 当前导航正要离开的路由
• next: 是个方法 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
  • next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
    你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
    确保要调用 next 方法，否则钩子就不会被 resolved。

全局后置钩子-常用于结束动画等

router.afterEach((to,from) => {
    //不接受next 也不会改变导航本身
});

route对象

this.$route 相当于当前激活的这个路由对象

比如上面的跳转到home这个路由之后 this.$route对象就相当于指的是home这个路由对象

它包含一当前url解析得到的一些数据，可以从对象里面解析得到一些数据 比如name path和参数等
在任何一个页面上打印this.$route 会有类似下面这样的打印

1.常用方法解释

• this.$route.name //获取当前路由对象的名称
• this.$route.path //获取当前路由对象的路径
• this.$route.params.userId //获取参数userId 传参方式为params的时候
• this.$route.query.userId //获取参数userId 传参方式为query的时候
• this.$route.meta //路由元信息
• this.$route.hash // 当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串 锚点
• this.$route.fullPath //路由的完整地址 包含参数和hash的完整路径
• this.$route.matched 是个 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
  完整如下图
  

2.当前路由对象的导航守卫

对当前路由对象有效

• 可以在路由配置上直接定义 beforeEnter 守卫：

routes: [
    {
      path: '/home',
      component: home,
      beforeEnter: (to, from, next) => {
        // ...处理逻辑
      }
    }
  ]

• 也可以在路由组件内直接定义处理

// 进入页面前调用
 beforeRouteEnter(to, from, next) {
 	//进入页面前的逻辑处理
 	//此时不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
      next()
  },
  // 离开页面调用
  beforeRouteLeave(to,from, next){
      //离开前的处理
      //这个离开守卫通常用来禁止用户在还未保存修改前突然离开 该导航可以通过 next(false) 来取消。
      next()
  },
  // 页面路由改变时调用
  beforeRouteUpdate(to, from, next) {
      //页面路由改变时的逻辑处理
      console.log(to.params.id)
      next()
  }

本文参考 https://router.vuejs.org/zh/ 整理的
有描述的不清楚或者不对的地方 欢迎指正讨论