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'}