vue 动态路由

vue 动态路由

 

routes配置

routes = [
        {
            path: '/movie',
            name: 'Movie',
            component: () => import(/* webpackChunkName: "movie" */ '../views/Movie'),
            children: [
            {
                path: 'detail/:movieId',
                components: {
                  detail: () => import('@/views/Detail'),
                },
                props: {
                  detail: true
                }
           }
       }
]

父组件嵌套

<router-view name="detail" />  // 命名路由

跳转

this.$router.push('/movie/detail/' + movieId);

子组件获取路由参数

props: ['movieId'],
        
通过 this.movieId就可以啦