vue-router 第三篇,路由传值

vue-router的路由传值,本文主要说一下通过name和params 传值,后面还会有一篇写通过query传值

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const Home = {
	template :'<div>Home 的内容</div>'
}
const First = {
	template:'<div>First 的内容</div>'
}
const FirstFirst = {
	template:'<div>firstfirst 的内容  id=  {{ $route.params.id }}</div>'
}
const FirstSecond = {
	template:'<div>FirstSecond 的内容</div>'
}
const Second = {
	template:'<div>Second 的内容</div>'
}
const asdf = {
	template:`
		<div>
			<h2>组件2</h2>
			<p>{{$route.name}}</p>
			<router-view></router-view>
		</div>
	`
}
const router = new VueRouter({
	mode:'history',
	base:__dirname,
	routes:[
		{path:'/',component:Home},
		{path:'/First',component:asdf,
			children:[
				{path:'/',name:'First',component:First},
				{path:'First',name:'FirstFirst',component:FirstFirst},
				{path:'Second',name:'FirstSecond',component:FirstSecond},
			]
		},
		{path:'/Second',component:Second},
	]
})
new Vue({
	router,
	template:`
		<div>
			<h1>导航</h1>
			<ul>
				<li><router-link to="/">Home</router-link></li>
				<li><router-link to="/First">First</router-link></li>
					<ol>
						<li><router-link :to="{name:'FirstFirst',params:{id:123}}">first-first</router-link></li>
						<li><router-link to="/First/Second">first-Second</router-link></li>
					</ol>
				<li><router-link to="/Second">Second</router-link></li>
			</ul>
			<router-view></router-view>
		</div>
	`
}).$mount('#app')

随机浏览