vue动态路由

动态路由

实现通过页面传输数值参数   

代码 如下：

<template>
    <div>
        <div v-for="data in datalist" :key="data" @click="handleClick(data)">
        {{data}}
        </div>
    </div>
</template>

<script>
    export default {
        // name: "nowplaying"
        data(){
            return{
                datalist:[111,222,333]
            }
        },
        methods:{
            handleClick(id){
                this.$router.push(`/detail/${id}`);
            }
        }
    }
</script>

页面如下：

点击数字产生如下链接URL ：http://localhost:8080/#/detail/111

在路由中（router.js）

然后在detail.vue中写如下代码：

<template>
    <div>
        detail
    </div>
</template>

<script>
    export default {
        // name: "filedetail",

        mounted(){
            console.log(this.$route.params.id)
        }
    }
</script>

可以在控制台显示动态传递的id