1, this.
route区别与联系
$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象
1, this.$router是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等.
想要导航到不同的url,则使用$router.push()
$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等
3,联系:
this.
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请求,参数不会再地址栏中显示