crithesJie的博客文档

vue-router相关问题

# vue-router相关问题

# 1.点击详情，跳转路由的头部标题修改为监测点的名称详情

@edit="handleClick"
// 页面点击跳转
// 详情调整，传入镇街名称
handleClick (a) {
    // console.log(a, 222)
    // this.$openPageSt('/zoology-environment/dqhj/air-details', { zdmc: a.zdmc })
    this.$router.push('/zoology-environment/dqhj/air-details', { zdmc: a.zdmc })
}
// 将标题修改为点击指定站点的名称
this.$route.meta.title = this.$route.query.zdmc + '空气质量详情'
1
2
3
4
5
6
7
8
9
10

# 2.vue-router钩子

一. 全局导航钩子函数

  • 全局前置守卫--router.beforeEach()--在每个路由改变时，执行一遍，页面加载之前
  • 全局后置守卫--router.afterEach()--页面加载之后

二.路由独享的守卫，路由内钩子

  • beforeEnter
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
1
2
3
4
5
6
7
8
9
10

三.组件内守卫，组件内钩子

  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave--清除定时器，阻止用户跳转，将公用的信息保存到session或Vuex中
beforeRouteLeave (to, from, next) {
  window.clearInterval(this.timer) //清楚定时器
  next()
}
1
2
3
4

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

  • active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换
  • 嵌套路由:路由的path中，定义了children路由，嵌套在一起
{ path: "/", redirect: "/home" },//重定向,指向了home组件
{ 
                path: '/home', 
                component: Home, 
                children:[
                    { path: '/home/login', component: Login},
                    { path: '/home/reg', component: Reg}
                ]
            }
1
2
3
4
5
6
7
8
9

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

  • 动态路由
  • params的类型
配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123

- 设置路由：path: '/article/:id'
- 跳转：this.$router.push(`/article/${id}`)
- 获取：this.$route.params.id
1
2
3
4
5
6
7
  • query的类类型
配置路由格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径:/route?id=123
1
2
3

mac相关问题