基于vue-cli的vue项目之路由2--param传参

路由使用param传参

1。第一个hello。vue组件，显示传的参数（单个）
<template>
	<div class="hello">
		<!--{{ this.$route.params.num }}-->
		<h1>这个是hello页面,穿过的参数是{{$route.params.name}}</h1>
		<h2></h2>

	</div>
</template>
<script>
	export default {
		name: "hello",
		data() {
			return {
				msg: "this is the hello页面"
			}
		},
		props: ["logo"]
	}
</script>

2.第二个打酱油的界面foo.vue，显示两个参数（多个）
<template>
	<div class="hello">
		<h1>这个是foo页面</h1>
		<h1>{{$route.params.fparam2}}</h1>
		<h1>{{$route.params.fparam1}}</h1>
		<h2></h2>

	</div>
</template>
<script>
	export default {
		name: "hello",
		data() {
			return {
				msg: "这个是foo.vue页面"
			}
		},
		props: ["logo"]
	}
</script>


3../router/index.js配置了重定向，注意修改，注意查看第53行的代码（单个），第58行代码（多个）
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)

const router = new VueRouter({
	routes: [{
			name:"/hello",
			path: "/hello:hparam1",
			component: require("../components/Hello.vue")
		},
		{
			name: "/foo",
			path: "/foo/:fparam1/age:fparam2",
			component: require("../components/foo.vue")
		},
		{
			path: "*",
			redirect: "/hello:hparam1"
		},
	]
})

export default router;

4.app。vue设置路由，在地77行的地方设置了传送的方式（单个），以及第80行设置了传输方式（多个）
<template>
	<div id="app">
		<!-- <hello></hello> -->
		<div class="nav">
			<ul>
				<li>
					<router-link  to="/hello123">hello页面</router-link>
				</li>
				<li>
					<router-link to="/foo/mk/agehello">foo页面</router-link>
				</li>
			</ul>
		</div>
		<div class="main">
			<router-view ></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		name: "app",
		components: {}
	}
</script>
<style>
	body {
		background-color: #f8f8ff;
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		color: #2c3e50;
	}
	
	.nav {
		position: fixed;
		width: 108px;
		left: 40px;
	}
	
	.nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.nav ul li {
		width: 108px;
		height: 48px;
		line-height: 48px;
		border: 1px solid #dadada;
		text-align: center;
	}
	
	.nav ul li a {
		display: block;
		position: relative;
		text-decoration: none;
	}
.nav ul li img {
	position: absolute;
	left: 0;
	top: 0;
width: 100px;
height: 30px;

	}
	.main {
		height: 400px;
		margin-left: 180px;
		margin-right: 25px;
	}
</style>

最后的界面是这样的: