一二级路由传参(router-link地址传参)

本文详细介绍如何在Vue.js中使用路由和组件进行页面切换与数据传递,包括配置路由、创建组件、使用router-link和router-view等关键概念。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 别忘了导入包 -->
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
	<div id="box">
		<ul>
			<li>
				<router-link to="/home">首页</router-link>
			</li>
			<li>
				<router-link to="/news">新闻</router-link>
			</li>
			<li>
				<router-link to="hot">热点</router-link>
			</li>
		</ul>
		<router-view></router-view>
	</div>


	<!-- home组件模板 -->
	<template id="home">
		<div>
			<h3>首页页面</h3>
		</div>
	</template>
	<!-- news组件模板 -->
	<template id="news">
		<div>
		<h3>新闻页面</h3>
		<ul>
			<li><router-link to="/news/0">新闻详情页1</router-link></li>
			<li>
				<router-link to="/news/1">新闻详情页2</router-link>
			</li>
		</ul>
	</div>
	</template>
	<!-- hot组件模板 -->
	<template id="hot">
		<div>
			<h3>热点页面</h3>
		</div>
	</template>
	<!-- news二级路由(子路由)模板 -->
	<template id="newsmsg">
		<div>
			<h3>新闻详情页1</h3>
			<!-- $route.parpams.是固定写法。id是规范。代表如一级路由的地址是 /news/0,那么$route.params.id将等于0。若是/news/xx 那会等于xx -->
			<p>这是参数:{{$route.params.id}}</p>
			<!-- 显示二级路由内的data arr数组的内容,若后面有多个参数,直接$route.params.参数名即可,不需要追加前面头部分(这里的id) -->
			<p>{{arr[$route.params.id]}}</p>
		</div>
	</template>

	<script>
		var Home=Vue.extend({template:"#home"});
		var News=Vue.extend({template:"#news"});
		var Hot=Vue.extend({template:"#hot"});
		var NewsDatail=Vue.extend({
			template:"#newsmsg",
			/*每个组件都是一个新的Vue哦*/
			data:function(){
				return {arr:["吴师傅1","吴师傅2"]}
			}
		});
		var routes=[
		{
			path:"/home",
			component:Home
		},
		{
			path:"/news",
			component:News
		},
		{
			path:"/hot",
			component:Hot
		},
		{	//注意这里配置地址和组件模板对应,:是必须的。id是规范
			path:"/news/:id",
			component:NewsDatail
		}
		];
		var router=new VueRouter({
			routes:routes
		});
		var vm=new Vue({
			el:"#box",
			router:router
		});
	</script>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值