$router和$route的区别

最新推荐文章于 2023-03-14 20:55:26 发布

JJ_huahua

最新推荐文章于 2023-03-14 20:55:26 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/JJ_huahua/article/details/104061258

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

$router和$route的区别

router对象
route对象
- 1.常用方法解释
- 2.当前路由对象的导航守卫

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

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 会有类似下面这样的打印
VueRoute对象

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 会有类似下面这样的打印
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()
  }