vue-cli学习-重定向和组件传参

重定向

使用 redirect，可以配置路由的重定向功能，有多种方式

    {
        path: '/a',
        redirect: '/list'
    }, {
        path: '/b',
        redirect: {
            // name:'List',
            path: '/list'
        }
    },

要动态的处理跳转的路径，也就是支持逻辑判断

        {
        path: '/c',
        redirect: (to) => {
            if (true) {
                // return '/list'
                // console.log(to)
                return {
                    name: 'List'
                }
            }
        }

为路由设置别名

    {
        path: '/list',
        name: 'List',
        alias: '/liebiao'
    }

组件传参

需求：希望 User/5 中获取 id 时变成{{id}}而不是{{$route.params.id}}

布尔模式

//index.js
{
    path: '/user/:id',
    name: 'User',
    component: User,
    props: true
}
//User.vue
<template>
  <div>
    <h4>user id : {{id}}</h4>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "User",
  props: ['id']
}
</script>

对象模式

//List.vue
<template>
    <h3>ListList:{{data}}</h3>
</template>

<script>
export default {
  name: "List",
  props:{
    data:{
      type:String,
      default : 'no data'
    }
  }
}
</script>
//index.js
//如果是命名视图，需要特别指出哪个视图使用
props: {
            default: {
                data: '列表'
            }
        },

使用query传参

//About.vue
<template>
  <div class="about">
    <h1>This is an about page:{{search}}</h1>
  </div>
</template>

<script>
    export default {
      name:'About',
      props :{
        search:{
          type:String,
          default:'no search'
        }
      }
    }
</script>
//index.js
//非命名视图
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
        props: route => ({
            search : route.query.search
        })
//命名视图
        components: {
            default: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
            sidebar: Sidebar,
            footer: Footer
        },
        props: {
            default: route => ({
                search: route.query.search
            })
        }