props分爲三種形式
- props爲對象
- props爲布爾值,這種只能接收params動態路由的參數
- props爲函數,可以接收query和params參數(推薦)
import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', props: { name: "張三", age: 20, addr:'河南省信陽市商城縣李集鄉新莊村' }, component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') }, { path: '/detail/:id/:title', name: 'detail', // props是個布爾值 // props:true, props($route){ return { id:$route.params.id, title:$route.params.title } }, component: () => import(/* webpackChunkName: "detail" */ '../views/Detail.vue') }, { path: '/mine', name: 'mine', props($route){ return { id:$route.query.id, title:$route.query.title } }, component: () => import(/* webpackChunkName: "detail" */ '../views/Mine.vue') } ] const router = new VueRouter({ mode: 'hash', base: process.env.BASE_URL, routes }) export default router
about(props爲對象的時候)
<template> <div class="about"> <h1>This is an about page</h1> <ul> <li>{{name}}</li> <li>{{age}}</li> <li>{{addr}}</li> </ul> <router-link :to="{ name:'detail', params:{ id: 1, title:'張三' } }"> 跳轉detail頁面 </router-link> <router-link :to="{ path:'/mine', query:{ id: 1, title:'張三' } }"> 跳轉mine頁面 </router-link> </div> </template> <script> export default { props: { name: { type: String, }, age: { type: Number, }, addr: { type: String, }, }, } </script>
detai(props爲布爾值,注意這種只能接收params參數)
<template> <div class="detail"> <h1>詳情頁面</h1> <ul> <li>id: {{id}}</li> <li>title: {{title}}</li> </ul> </div> </template> <script> // @ is an alias to /src export default { name: 'Detail', components: {}, props: { id: { type: [Number,String], }, title: { type: String, }, } } </script>
mine頁面(props爲函數的時候,可以接收query參數和params參數)
<template> <div class="mine"> <h1>我的頁面</h1> <ul> <li>id: {{id}}</li> <li>title: {{title}}</li> </ul> </div> </template> <script> // @ is an alias to /src export default { name: 'Mine', components: {}, props: { id: { type: [Number,String], }, title: { type: String, }, } } </script>