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>
标签:vue,name,title,props,id,传值,页面 From: https://www.cnblogs.com/elsons/p/16927713.html