Vue74 路由的props配置

笔记

​ 作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	
	

	
	
	
	
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

代码

Banner.vue

template>
	div class="col-xs-offset-2 col-xs-8">
		div class="page-header">h2>Vue Router Demoh2>div>
	div>
template>

script>
	export default {
		name:'Banner'
	}
script>

About.vue

template>
	h2> 我是 About 的内容 h2>
template>

script>
	export default {
		name:'About',
		
		
	}
script>

Detail.vue

template>
	ul>
		li> 消息编号：{{id}}li>
		li> 消息标题：{{title}}li>
	ul>
template>

script>
	export default {
		name:'Detail',
		props:['id','title'],
		computed: {
			
			
			
			
			
			
		},
		mounted() {
			
		},
	}
script>

Home.vue

template>
	div>
		h2>Home 组件内容 h2>
		div>
			ul class="nav nav-tabs">
				li>
					router-link class="list-group-item" active-class="active" to="/home/news">Newsrouter-link>
				li>
				li>
					router-link class="list-group-item" active-class="active" to="/home/message">Messagerouter-link>
				li>
			ul>
			router-view>router-view>
		div>
	div>
template>

script>
	export default {
		name:'Home',
		
		
	}
script>

Message.vue

template>
	div>
		ul>
			li v-for="m in messageList" :key="m.id">
				
				

				
				router-link :to="{name:'xiangqing',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				router-link>
			
			li>
		ul>
		hr>
		router-view>router-view>
	div>
template>

script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'001',title:'消息 001'},
					{id:'002',title:'消息 002'},
					{id:'003',title:'消息 003'}
				]
			}
		},
	}
script>

News.vue

template>
	ul>
		li>news001li>
		li>news002li>
		li>news003li>
	ul>
template>

script>
	export default {
		name:'News'
	}
script>

index.js

import VueRouter from 'vue-router'

import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


export default new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home,
			children:[
				{
					path:'news',
					component:News,
				},
				{
					path:'message',
					component:Message,
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,

							
							

							
							

							
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})

App.vue

template>
  div>
    div class="row">
      Banner/>
    div>
    div class="row">
      div class="col-xs-2 col-xs-offset-2">
        div class="list-group">
					
          
          

					
					router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
          router-link class="list-group-item" active-class="active" to="/home">Homerouter-link>
        div>
      div>
      div class="col-xs-6">
        div class="panel">
          div class="panel-body">
						
            router-view>router-view>
          div>
        div>
      div>
    div>
  div>
template>

script>
	import Banner from './components/Banner'
	export default {
		name:'App',
		components:{Banner}
	}
script>

main.js

import Vue from 'vue'

import App from './App.vue'

import VueRouter from 'vue-router'

import router from './router'


Vue.config.productionTip = false

Vue.use(VueRouter)


new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})