Vue.js入门（10）路由、路由嵌套、钩子函数

序言

https://router.vuejs.org/zh/

嵌套路由

子路由

路由重定向

路由占位符

路由钩子函数有三种：

            1：全局钩子： beforeEach、 afterEach

            2：单个路由里面的钩子：  beforeEnter、 beforeLeave

            3:组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

路由参数

{ path: '/user/:id', component: User, props: true },

{ path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },

{

     path: '/user/:id',

     component: User,

     props: route => ({ uname: 'zs', age: 20, id: route.params.id })

 },

props: ['id', 'uname', 'age'],

路由导航守卫

全局守卫

路由独享守卫

this.$store.commit('UPDATE_TABBAR_STATUS', 'help-center');

this.$router.push({ name: 'setPassWord', query: { hotelStaffType: 'hotel' } });

获取路由参数

1.通过query配置的：this.$route.query

 this.action = this.$route.query.action
    if (this.action === 'add') {
      this.title = '新建角色'
    } else if (this.action === 'edit') {
      this.title = '修改角色'
    }

2.通过params配置的：this.$route.params

 

回退到上一步

this.$router.back(-1)

 

 

资料

超详细！Vue-Router手把手教程