vue进阶-vue-route中 this.$router 与 this.$route 的区别

这篇具有很好参考价值的文章主要介绍了vue进阶-vue-route中 this.$router 与 this.$route 的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

通过上章 📖vue进阶-vue-route 学习,我们发现路由的设置和获取会用到 this.$routerthis.$route,容易混淆,本章做下区分。

this.$router

this.$router :访问路由器。是一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push()replace()go()方法

vue获取路由路径数组?

this.$router.options.routes 或者 this.$route.matched

this.$route

this.$route:当前路由对象。每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 namepathparamsquery属性

区别

  • 📌this.$router 是用来 操作 路由的
  • 📌this.$route 是用来 获取 路由信息的
// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    },
  },
  methods: {
    goToDashboard() {
      if (isAuthenticated) {
        this.$router.push('/dashboard')
      } else {
        this.$router.push('/login')
      }
    },
  },
}

⚠️注: 要在 setup 函数中访问路由,请调用 useRouteruseRoute 函数。

💦 我们会经常使用 router 实例,请记住,this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。我们使用 this.$router 的原因是,我们不想在每个需要操作路由的组件中都导入路由

编程式导航

在 Vue 实例中,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。当你点击 <router-link> 时,内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 router.push(...)

声明式 编程式
<router-link :to=“…”> router.push(…)

该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意:如果提供了 path,params 会被忽略。

🎈router.push 和所有其他导航方法都会返回一个 Promise,让我们可以等到导航完成后才知道是成功还是失败。文章来源地址https://www.toymoban.com/news/detail-577742.html

路由传参

{
    name: child
    path: '/child/:id',
    component: Child
},
{
    name: user
    path: '/user',
    component: User
}

params传参

this.$router.push({
   path:'/child/${id}',
})
或者
this.$router.push({
   name: 'child',
   params: { id: '1001' }
})

获取params: this.$route.params.id

query 传参

this.$router.push({
   path:'/user', 
   query:{userId: '123'}
});
或者
this.$router.push({
   name: 'user', 
   query: {userId: '123'}
});

获取query:this.$route.query.userId

综合

this.$router.push({
   name: 'child',
   params: { id: '1001' },
   query: {title: '路由组件query传参', userName: 'Jack'}
})

获取params: this.$route.params.id
获取query:this.$route.query.userId

到了这里,关于vue进阶-vue-route中 this.$router 与 this.$route 的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue.js:Vue-Router动态路由从服务器接口获取路由数据

    文档 https://v3.router.vuejs.org/zh/installation.html 版本号 有几种方式实现动态路由: 前端配置 完整路由 ,通过接口返回的数据判断是否可显示,是否可访问 前端配置 部分路由 ,由后端接口返回的数据生成新路由 抛开路由的思维,是否能直接通过 url查询参数 或者是 动态路径参数

    2024年02月08日
    浏览(52)
  • 【Vue】Vue-route路由

    Vue-router官网 由vue-router模块控制,需要额外安装依赖。参考官网 router-link:路由链接,跳转至路由视图,展示指定路由组件信息 router-view:路由视图,展示路由组件信息 route:路由信息 router:路由对象 router-link 路由跳转,类似a标签,路由跳转作用 router-view 路由视图,用于其

    2023年04月22日
    浏览(42)
  • vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

    vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: \\\"/home\\\".   报错原因:重复点击路由导致,因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调,否则就会报出以上的错误。 原代码 第一种         在进

    2023年04月08日
    浏览(125)
  • Vue 2和Vue 3路由Router创建的区别简记(在main.js文件中引入的区别和router的js文件中创建语法的区别)

    1、版本的搭配: Vue 2到Vue 3的改版升级,同样的带来Vue Router的升级。创建Vue项目之后,我们可以在package.json文件中看到,Vue 2创建的项目往往是与Vue Router 3.X版本搭配的,而Vue 3创建的项目与Vue Router 4.X版本搭配。 Vue 3搭配Vue Router 4.X版本: Vue 2搭配Vue Router3.X版本: 2、在main

    2024年02月08日
    浏览(56)
  • 路由vue-route的使用

    path:配置路由访问的路径 name:给路由起名字(命名路由) component:访问路由时,渲染的组件 App.vue 这个是vue-route里面提供的组件 作用:路由的出口 举例:当我访问根路由时会渲染IndexView.vue组件 IndexView.vue中的内容 而IndexView.vue中的内容会在根组件下的 router-view/ 中展示 推

    2024年01月16日
    浏览(40)
  • Vue-route核心知识整理

    目录 1 相关理解 1.1 对 vue-router 的理解 1.2 对 SPA 应用的理解 1.3 对路由的理解 1.3.1 什么是路由? 1.3.2 路由的分类 2 几个注意点 3 路由的基本使用 4 嵌套 (多级) 路由 5 路由传参 5.1 query 方式传参 5.1.1 跳转路由并携带query参数, to的字符串写法 5.1.2 跳转路由并携带query参数,

    2024年02月21日
    浏览(35)
  • vue-router3.x和vue-router4.x相互影响的问题记录

    项目中有一个系统使用的微前端,主站使用是 vue2 实现的,使用的是 vue-router3.x 。子应用有使用 vue3 实现的,使用的为 vue-router4.x 。 该子应用中的页面A有通过操作按钮触发跳转到其他子应用页面B的需求,此时使用的是 vue-router4.x 的编程式导航API。 当通过点击主站的Tab切换回

    2023年04月26日
    浏览(37)
  • vue-router笔记

    目的:为了实现SPA(单页面应用) vue-router是一个插件库 安装: 路由的配置路径:/src/router/index.js 路由组件的目录:/src/pages/ 一般组件的目录:/src/components/ 使用: main.js: App.vue: About.vue: 不可见的路由组件在哪?        被销毁了 嵌套路由的案例: 路由传参: query: 传参

    2024年02月12日
    浏览(47)
  • 【Vue-Router】别名

    后台返回来的路径名不合理,但多个项目在使用中了,不方便改时可以使用别名。可以有多个或一个。 First.vue Second.vue , Third.vue 代码同理 UserSettings.vue index.ts App.vue

    2024年02月12日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包