vue-router router实例方法 getMatchedComponents、matched 的使用

一、getMatchedComponents

//vue组件生命周期中mounted() {console.log(this.$router.getMatchedComponents(),'getMatchedComponents') },
//router.js中{path: '/myRouter',name: 'myRouter',component: () => import('@/components/myCom'),children:[{path: 'third',name: 'third',component: () => import('@/components/thirdCom')},]},

输出如下，为通过路由匹配的两个组件对象（注意此处的name，并不是路由中定义的name，而是组件name）

官方文档描述如下：

二、matched

官方文档

页面访问路径为：http://localhost:8080/myRouter/third#6


//router.js
{path: '/myRouter',name: 'myRouter',component: () => import('@/components/myCom'),children:[{path: 'third',name: 'third',component: () => import('@/components/thirdCom')},]},//vue组件生命周期内mounted() {console.log(this.$route.matched,'hash')},

总结：二者的区别是，一个匹配的是组件对象，一个是路由对象

vue-router router实例方法 getMatchedComponents、matched 的使用相关推荐

Vue的router配置
新建一个router文件夹专门存放路由配置 1.main.js // 配置路由相关信息 import Vue from 'vue'; import App form './App' import ro ...
四 Vue学习 router学习
index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
vue路由-router
VueRouter基础 vue路由的注册导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...
Vue 路由router的两种模式
两种模式 vue中router可以设两种模式:hash和history.设置方式就是代码中注释的部分. import Vue from 'vue' import Router from 'vue-ro ...
单页vue路由router
Vue.js + vue-router 可以很简单的实现单页应用. <router-link> 是一个组件,该组件用于设置一个导航链接,切换不同 HTML 内容. to 属性为目标地址, ...
vue新版router.addRoute基础用法
vue新版router.addRoute基础用法新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由.子路由在添加子路由的时候比如 ...
vue——路由router
点击页面中的导航链接不会刷新页面,只会做页面的局部更新 1.安装vue-router 执行 npm i vue-router@3命令注意版本 vue2--vue-router3:vue3--vue- ...
vue打开二级或者三级页面传输对象，再刷新浏览器数据丢失问题解决（vue使用router传递数据）
vue使用router进行跳转如果只是单纯的URL跳转的话,直接指定path就可以了 this.$router.push({path:'whiteList'}}); 如果需要使用router进行单纯 ...
vue路由router的props配置
vue路由router的props配置前置知识:vue-router3路由配置和使用,适配vue2,vue-router代码模版路由props配置的作用:让路由组件更方便的接收到参数 ⚠️ 当不使 ...

vue-router router实例方法 getMatchedComponents、matched 的使用

一、getMatchedComponents

二、matched

vue-router router实例方法 getMatchedComponents、matched 的使用相关推荐

最新文章

热门文章