vue路由参数传递

vue路由传值方式有以下4中

• 利用router-link路由导航进行传递
• 调用$router.push实现传递
• 通过路由属性中的name匹配路由，再根据params传递参数值
• 通过query传递

router-link路由导航

路由配置：

{path: '/a/:num',name: 'A', component: A}

父组件：

<router-link to='/跳转路径/参数'><router-link>

子组件：

let num = this.route.params.num // 接收父组件传递过来的参数

调用$router.push实现路由传参

路由配置：

{path: '/a/:num',name: 'A', component: A}

父组件：通过事件触发

methods:{
    toRouter(num) {
        this.$router.push({path: '/a/${id}'})
    }
}

子组件：

mouted() {
    let num = this.$route.param.num;
}

通过路由属性中的name匹配路由，params传递参数

路由配置：

{path: '/a', name: 'A', component: A}

// 路径后不需要加传入的参数名称，但是name必须和父组件中的name一致

// 地址栏中的显示：地址栏不会带有传入参数名称，刷新后参数丢失

父组件：

methods: {
    toRouter() {
        this.$router.push({
            name: 'A',
            params: {
                someText: '路由参数'
            }
        })
    }
}

子组件：

let text = this.$route.params.someText;

query传递参数

路由配置：

{path: '/a',name: 'A', component: A}

// 地址栏中的显示：地址栏会带有传入参数名称，刷新后参数不会丢失

父组件：

methods: {
    toRouter() {
        this.$router.push({
            path: '/a',
            query: {
                someText: '路由参数'
            }
        })
    }
}

子组件：

let text = this.$route.query.someText;