vue 传参

文件目录结构

router >> index.js

{
        path: '/Page8',
        name: 'Page8',
        component: Page8
    }

App.vue

<router-link :to="{name:'Page8',params:{zh:'qiwei',mima:'asdf342'}}">page8</router-link>
        </p>
        <p>
            <h2>{{ $route.params}}</h2>
            <h3>{{ $route.params.mima }}</h3>
        </p>

Page8.vue

<div class="page1">
        <h1>{{ msg }}</h1>
        <h4>{{ $route.name }}</h4>
    </div>
</template>

<script>
    export default{
        name:'Page8',
        data(){
            return{
                msg:'I am Page8.vue'
            }
        }
        
    }
</script>

效果图

原理:
<router-link :to="{name:'Page8',params:{zh:'qiwei',mima:'asdf342'}}"
表示当浏览器路径跳到page8是,即路径为/page8时,vue的属性$route 的 属性params 的值就得到为{zh:'qiwei',mima:'asdf342'}