Vue-router之重定向

最新推荐文章于 2024-03-30 11:39:29 发布

一杯雪花勇闯天涯

最新推荐文章于 2024-03-30 11:39:29 发布

阅读量298

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u014265398/article/details/109731494

版权

vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

一.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue基础之重定向</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/a">首页</router-link>
			<router-link to="/b">热点</router-link>
			<router-link to="/c">视频</router-link>
			<router-view></router-view>
		</div>
		
	</body>
</html>
<!--在线引入vue.js-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--在线引入vue-router.js-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
	//提供渲染的作用
	//想知道动态路由配置的path的值是什么
	var componentA = "<div>baseketBallA</div>";
	var componentB = "<div>baseketBallB</div>";
	var componentC = "<div>baseketBallC</div>";
	//创建vue-router，并且配置路由
	
	var router = new VueRouter({
		routes:[
			{
				path:'/',
				redirect:{
					name:'bbb'
				},
				
			},
			{
				name:'aaa',
				path:'/a',
				component:{
					template:componentA
				},
				
			},
			{
				name:'bbb',
				path:'/b',
				component:{
					template:componentB,
				}
			},
			{
				name:'ccc',
				path:'/c',
				component:{
			         template:componentC
				},
			}
		]
	});
	//创建vue实例，并且绑定路由
	new Vue({
		el:'#app',
		router:router   //在vue众绑定vue-router
	});
</script>

二.效果

在这里插入图片描述

一杯雪花勇闯天涯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-router之重定向

一.代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue基础之重定向</title> </head> <body> <div id="app"> <router-link to="/a">首页</router-link> <router-link to="/b"&
复制链接

扫一扫