第4節跳轉頁面傳參 · vue.js

[TOC] ### 1. 傳參 ~~~ <template> <div class="home"> <p>hello world</p>  <router-link to="/about">about</router-link>  <button @click="handleClick">detail</button> <Head></Head> </div> </template> <script> // 導入組件 import Head from "../components/head"; // 將頁面導出 export default { name: "home", methods: { handleClick() { // 事件頁面跳轉 this.$router.push("/about/"+10); //10=this.$props.接收數據.id } }, // 注冊組件 components: { Head } }; </script> ~~~ ### 2. 在router.js中添加傳遞參數 ~~~ 給跳轉到的頁面添加參數如 /:id { path: '/about/:id', name: 'about', component: () => import(/* webpackChunkName: "about" */ './pages/About.vue') } ~~~ ### 3. 接收（特別注意：輸出的是$route 跳轉頁面的是$router） ~~~ <template> <div class="about"> <h1>This is an about page</h1> </div> </template> <script> // 將頁面導出 export default { name: "about", methods: {}, //或者created()生命周期中 mounted() { console.log(this.$route.params); } }; </script> ~~~