2021-04-12

1, this.router、this.route区别与联系

$router : 是路由操作对象,只写对象

$route : 路由信息对象,只读对象

1, this.$router是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等.

想要导航到不同的url,则使用$router.push()

router

$router对象是全局路由的实例,是router构造方法的实例

路由实例方法:

  • push(): push方法的跳转会向 history 栈添加一个新的记录,当我们点击浏览器的返回按钮时可以看到之前的页面。
  • go(): 页面路由跳转 前进或者后退
  • replace(): push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
    不会向 history 栈添加一个新的记录。 一般使用replace来做404页面

2,this.$route对象表示当前的路由信息,包含了当前url解析得到的信息,包含当前的路径、参数、query对象等

this.$route为当前route跳转对象,里面可以获取到name、path、query、params等

route

3,联系:

router

this.router中的currentRoute就是组件路由this.route

2,keep-alive

keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留,例如我们将某个列表组件内容滑动到第10条位置,那么我们呢在切换到一个组件后再次切换回到该组件,该组件的位置状态依旧保持在第10条列表处

{
  path: '/a',
  component: () => import('@/pages/A'),
  meta: {
    title:'A',
    keepAlive: true
  }
}

在routes.js中定义路由,在路由中定义元信息(meta字段),需要缓存的页面就需要在meta对象中定义一个字段,这里设置为keepAlive,设置为true,反之,则不缓存

3,active-class是哪个组件的属性?嵌套路由怎么定义?

active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换;

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

在 VueRouter 的参数中使用 children 配置,这样就可以很好的实现路由嵌套。

4,怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

在router目录下的index.js文件中,对path属性加上/:id。 使用router对象的params.id

5, Vue Router 的params和query传参的使用和区别

query方式传参和接受参数

  • 传递数据较多时,用query, 因为query传入的是一个对象
  • 配置路由格式:'edit' , 也就是普通配置
  • 传递后形成的路径:edit?id=28
// 传参
this.$router.push({
  path: '/home',
  query: {
    id: id
  }
})

// 接受参数
this.$route.query.id

params传参和接受参数

  • 传一个值时,用params
  • 配置路由格式:"path": "edit/:id"
  • 传递后形成的路径: edit/28
// 传参
this.$router.push({
  name: 'home',
  params: {
    id: id
  }
})

// 接受参数
this.$route.params.id

params传参,push里面只能是name: 'xxx', params只能用name来引入路由,如果换成path,接受参数页面会是undefined

即query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,427评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,551评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,747评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,939评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,955评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,737评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,448评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,352评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,834评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,992评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,133评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,815评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,477评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,022评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,147评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,398评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,077评论 2 355

推荐阅读更多精彩内容

  • vue-router(路由)详细教程 一、安装 如果你用vue-cli脚手架来搭建项目,配置过程会选择是否用到路由...
    假如时光丶倒流阅读 233评论 0 0
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,403评论 0 11
  • vue面试题 一、vue优点 1.轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 2.简单...
    没糖_cristalle阅读 1,619评论 0 3
  • 在线访问手册:https://hanxueqing.github.io/Web-Front-end-Intervi...
    视觉派Pie阅读 2,192评论 0 5
  • 夜莺2517阅读 127,720评论 1 9