2021-04-12

1, 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.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请求，参数不会再地址栏中显示