vue路由配置、路由跳转、路由拦截

1、声明式

  传参的二种方式

    params:/home/1/2 需要在路由path中配置  {path:'/home/:id/:age'}

    query:/home?id=1&age=2

  接收参数

    params:this.$route.params.id

    query:this.$route.query.id

  路由跳转

    点击跳转

    点击跳转

    点击跳转

    点击跳转

    path:'/home', params:{id:1}}">点击跳转  // 无效

    点击跳转

    点击跳转

 

2、编程式

  this.$router.push('/home')

  this.$router.push({path: '/home'})

  this.$router.push({name: 'Home'})

  this.$router.push({path: '/home', params:{id:1}})  // 无效

  this.$router.push({path: '/home', query:{id:1}})

  this.$router.push({name: 'Home', params:{id:1}})

  this.$router.push({name: 'Home', query:{id:1}})

 

3、嵌套路由

  一级路由显示在APP.vue中的

  二级路由显示在它对应的一级路由组件的

  let  routes  =  [

    {

      path:  'home',

      name:  'Home',

      component: ( )  =>  import('../views/Home')

    },

    {

      path:  'list',

      component: ( )  =>  import('../views/List'),

      children: [

        {

          path: '/list/list1',

          component: ( )  =>  import('../views/list1')

        },

        {

          path: 'list2',

          component: ( )  =>  import('../views/list2')

        }

      ]

    }

  ]

 

4、路由props传参

  路由文件

    {

      path: 'list1',

      name: 'List1',

      meta: {title: '列表一'},

      props: true,  // 可以使用props传参

      component: ( )  => import('../views/List1')

    },   

    {

 

      path: 'list2',

 

      name: 'List2',

 

      meta: {title: '列表二'},

 

      props: {

        data: {a:1, b:2}

      },

      component: ( )  => import('../views/List2')

 

    },

  List2组件

    props: ['data']

 

5、路由拦截

  router.beforeEach(function(to, from, next){

    console.log('路由跳转之前拦截')

    next( )

  })

 

你可能感兴趣的:(vue路由配置、路由跳转、路由拦截)