Vue2 使用params链接传值-实例

最新推荐文章于 2024-05-20 08:00:11 发布

乙火

最新推荐文章于 2024-05-20 08:00:11 发布

阅读量367

点赞数

分类专栏： vue 文章标签： vue.js vue

本文链接：https://blog.csdn.net/tianchoy/article/details/123683372

版权

vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

HelloWord.vue

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <router-link :to="{ name:'children', params: {id: 222,cid:333} }">
      显示
    </router-link>
  </div>
</template>

children.vue

<template>
    <div>{{ id }}--{{ cid }}</div>
</template>
<script>
export default {
    name:'children',
    data(){
        return{
            id:'',
            cid:''
        }
    },
    created(){
        this.id = this.$route.params.id,
        this.cid = this.$route.params.cid
    }
}
</script>
<style scoped>

</style>

router.vue

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import children from '@/components/children'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'/detail/:id',
      name:'children',
      component:children
    }
  ]
})