2018年11月10日 关于Vue.js生态之Vue-router and 传参方式

关于router的用法

//在html中的相关代码
<div id="app">
	<div>
		<router-link to="/">首页</router-link>  //<router-link>是Vue-router自带的
		<router-link to="/about">关于我们</router-link>
	</div>
	<div>
		<router-view></router-view>//想要让内容渲染可视化，要使用这个标记
	</div>
</div>

//在Vue.js中的相关代码
var nqy = [
	{
		path:'/',
		component:{
				template:`
					<div>
						<h1>首页</h1>
					</div>
				`,
			}
	},
		{
		path:'/about',
		component:{
				template:`
					<div>
						<h1>关于我们</h1>
					</div>
				`,
			}
	},
];
var nyp = new VueRouter({
	routes:nqy,  //这里的routes是VueRouter中自带的属性
});
var app = new Vue({
	el:'#app',
	router:nyp,   //这里的router是Vue中自带的属性
});

关于Vue-router的传参

//在html中的相关代码
<div id="app">
	<div>
		<router-link to="/">首页</router-link>  //<router-link>是Vue-router自带的
		<router-link to="/about">关于我们</router-link>
		<router-link to="/user/张三三">张三三</router-link>
		<router-link to="/user/李四四">李四四</router-link>
	</div>
	<div>
		<router-view></router-view>//想要让内容渲染可视化，要使用这个标记
	</div>
</div>

//在Vue.js中的相关代码
var nqy = [
	{
		path:'/',
		component:{
				template:`
					<div>
						<h1>首页</h1>
					</div>
				`,
			}
	},
		{
		path:'/about',
		component:{
				template:`
					<div>
						<h1>关于我们</h1>
					</div>
				`,
			}
	},
			{
		path:'/user/:name',
		component:{
				template:`
					<div>
						<div>我叫：{{@route.params.name}}</div>
						<div>我叫：{{@route.query.age}}</div> //这个方法是在地址栏中输入/age = number进行传参
					</div>
				`,
			}
	},
];
var nyp = new VueRouter({
	routes:nqy,  //这里的routes是VueRouter中自带的属性
});
var app = new Vue({
	el:'#app',
	router:nyp,   //这里的router是Vue中自带的属性
});