Vue（四）路由

最新推荐文章于 2022-06-16 07:06:00 发布

码代马

最新推荐文章于 2022-06-16 07:06:00 发布

阅读量98

点赞数

分类专栏： Vue 文章标签： Vue Router 路由

本文链接：https://blog.csdn.net/qq_37296487/article/details/96028425

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

路由Router

路由定义使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/show"></router-link>
			<router-link to="/show2">按钮点击跳转</router-link>
			<router-view></router-view>
		</div>
		
		<template id="com">
			<div id="">
				<h1>利用路由显示</h1>
			</div>
		</template>
		
		<template id="com2">
			<div id="">
				<h1>点击按钮后显示</h1>
			</div>
		</template>
		<script>
			var com = {
				template:'#com'
			}
			
			var com2 = {
				template:'#com2'
			}
			var routes = [
				{path:'/',redirect:'/show'},
				{path:'/show',component:com},
				{path:'/show2',component:com2}
			]
			
			var router = new VueRouter({
				routes
			})
			
			new Vue({
				el:'#app',
				router
			})
		</script>
	</body>
</html>

如上述程序，首先要引入vue-router.js文件，这样才能使用路由。同时注意，要先引入vue.js文件后再引入vue-router.js文件，这样才能生效。
如上述程序，路由在实现单页面内的跳转是非常简单的。路由的使用依靠，两个标签：<router-link to="/show"></router-link>和<router-view></router-view>,在router-link组件中to属性是页面内跳转的url，其与下面这段程序相照应：

var routes = [
				{path:'/',redirect:'/show'},
				{path:'/show',component:com},
				{path:'/show2',component:com2}
			]

当路径为/时，重定义为：/show，当路径为/show时，在标签<router-view></router-view>中调用的是com组件，同样，当path为/show2是，标签中调用的是组件com2.
补充：<router-link></router-link>和<router-view></router-view>这两个标签是vue提供的。其中<router-link></router-link>标签相当于html中的标签，不过在vue中表现要更好。

路由传参

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/show/123456">测试传参路由</router-link>
			<router-view></router-view>
		</div>
		
		<template id="com">
			<div id="">
				<h1>传入参数id——{{$route.params.id}}</h1>
			</div>
		</template>
		
		<script type="text/javascript">
			var com = {
				template:'#com'
			}
			var routes =[
				{path:'/show/:id',component:com}
			]
			
			var router = new VueRouter({
				routes
			})
			new Vue({
				el:'#app',
				router
			})
		</script>
	</body>
</html>

如上述程序所示，关于传参的方法格式是<router-link></router-link>标签中to属性的/show/123456，其对应的是{path:'/show/:id',component:com}这段程序，其中id就是123456。在组件中可以使用$route.params.id获得传入的值。

路由的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/new">新闻</router-link>
			<router-link to="/home">主页</router-link>
			<router-view></router-view>
		</div>
		
		<template id="new">
			<h1>这是新闻页面</h1>
		</template>
		
		<template id="home">
			<div id="">
				<router-link to="/home/login">登录</router-link>
				<router-link to="/home/reg">注册</router-link>
				<router-view></router-view>
			</div>
		</template>
		
		<template id="login">
			<h3>这是登录子页面</h3>
		</template>
		
		<template id="reg">
			<h3>这是注册子页面</h3>
		</template>
		
		<script type="text/javascript">
			var reg = {
				template:'#reg'
			}
			var login = {
				template:'#login'
			}
			var home = {
				template:'#home'
			}
			var n = {
				template:'#new'
			}
			
			var routes = [
				{path:'/',rediect:'/new'},
				{path:'/new',component:n},
				{path:'/home',component:home,
				children:[
					{path:'login',component:login},
					{path:'reg',component:reg}
				]}
			]
			
			var router = new VueRouter({
				routes
			})
			
			new Vue({
				el:'#app',
				router
			})
		</script>
	</body>
</html>

如上述的程序，在路由中点击home，进入登录/注册的组件。路由的嵌套主要是通过children属性实现的。

码代马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（四）路由

路由Router路由定义使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></s...
复制链接

扫一扫