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

最新推荐文章于 2024-08-25 22:59:34 发布

chijiajing

最新推荐文章于 2024-08-25 22:59:34 发布

阅读量874

点赞数

CC 4.0 BY-SA版权

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/chijiajing/article/details/82890002

学习专栏收录该内容

96 篇文章

订阅专栏

本文详细介绍如何在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>