vue动态路由的写法

main.vue

<template>
    <div>
        <ul>
            <li @click="toChild('gunsmoke')">click me to go to child</li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            toChild(data) {
                this.$router.push(`/child/${data}`)
                //this.$router.push({name:'child',params:{data:data}});这样写也可以
            }
        },
        components: {}
    }
</script>

router.js写法

	  {
          path: '/child/:data',
          name: 'child', //加上这个属性后配合上面的注释写法
          component: child
      }

child.vue

<template>
    <div>
        我是子组件
        <slot></slot>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log(this.$route)
        }
    }
</script>

效果图

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读