第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> ~~~