登录 注册

Vue 学习 (四)——路由

本贴最后更新于 2229 天前，其中的信息可能已经时移世改

这篇文章继承上一篇继续学习 Vue 的路由。
参考： Vue Router 官方文档 https://router.vuejs.org/zh/guide/
上一篇文章的链接：Vue 学习(三)——组件 http://www.honeybee.top/articles/2018/10/09/1539073039977.html

1. 什么是路由

路由可以被区分为前端路由和后端路由，这两者之间的区别：
后端路由：以前都是用超链接作为 URL 地址，所有的 URL 地址也相对应服务器上的资源。
前端路由：不同于后端路由，对于单页面的应用程序来说，主要通过 URL 中的 hash(#号)来实现不同页面之间的切换，而且 hash 有一个特点：http 请求中不会包含 hash 相关的内容，所以单页面程序中的跳转主要用 hash 实现。

2. 安装

~NPM

npm install vue-router

如果在模块化工程中使用路由，必须要通过 Vue.use() 明确安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

注：如果使用全局的 script 标签，则无须如此 (手动安装)。因为是学习单个功能的原因，所以没有创建模块化工程，下面例子都是直接用 html 页面引入 js 来完成的。

3. 路由的基本使用

<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 这个写法也可以，但一般使用下面的官方写法-->
			<!--<a href="#/login">登录</a>--》
			<!--<a href="#/register">注册</a>-->
			
			<!-- 说到底其实router-link 默认渲染的是一个 a 标签 -->
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
			
			<!-- 这是vue-router中的元素，用来当作占位符，路由规则匹配到的组件则会展示到这个元素中去 -->
			<router-view></router-view>
		</div>
		
		<script>
			//2.创建一个登录组件模板对象
			var login = {
				template: '<h2>登录组件</h2>'
			};
			
			//3.创建一个注册组件模板对象
			var register = {
				template: '<h2>注册组件</h2>'
			};
			
			//1.通过VueRouter构造函数创建一个路由对象
			var routerObj = new VueRouter({
				//为构造函数传递一个配置对象routes,可以放置路由匹配规则
				routes: [
					//每个路由匹配规则都是一个对象，这个必须有两个属性：
					//属性1：path, 表示监听路由的链接地址;
					//属性2： component, 表示匹配到path的地址后,则展示component属性对应的组件
					//注意: component 的属性值应该是组件的 模板对象 ， 而不是组件的名称
					{path: '/login', component: login},
					{path: '/register', component: register}
				]
			});
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				//4.将路由规则对象，注册到VM实例上，监听URL地址的变化来展示对应的组件
				router: routerObj
			});
		</script>
	</body>
</html>

~路由对应的运行结果(注意地址栏的变化)：
登录组件：
imagepng
注册组件：
imagepng
另外需要说明的是：在引入 vue-router.js 后地址栏会自动带上 #/ ，代表 hash 路由。

4. 重定向

将上面的例子修改下：让页面默认跳转到 /login 路由上，在上面例子的基础上修改

//1.通过VueRouter构造函数创建一个路由对象
  var routerObj = new VueRouter({
	  //为构造函数传递一个配置对象routes,可以放置路由匹配规则
	  routes: [
		  //每个路由匹配规则都是一个对象，这个必须有两个属性：
		  //属性1：path, 表示监听路由的链接地址;
		  //属性2： component, 表示匹配到path的地址后,则展示component属性对应的组件
		  //注意: component 的属性值应该是组件的 模板对象 ， 而不是组件的名称
 		  {path: '/', redirect: '/login'},    //新增加的行
		  {path: '/login', component: login},
		  {path: '/register', component: register}
	  ]
  });

5. 路由传参方式

1) 传参方式 1：使用 query 方式传递参数

对 路由的基本使用 的例子再做改动：

<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!--改动1：-->
			<router-link to="/login?id=1&account=admin">登录</router-link>
			<router-link to="/register">注册</router-link>
			
			<router-view></router-view>
		</div>
		
		<script>
			//改动2：这里通过$route.query来获取参数
			var login = {
				template: '<h2>登录组件 --- {{this.$route.query.id}} --- {{$route.query.account}}</h2>'
			};
			
			var register = {
				template: '<h2>注册组件</h2>'
			};
			
			var routerObj = new VueRouter({
				routes: [
					{path: '/login', component: login},
					{path: '/register', component: register}
				]
			});
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router: routerObj
			});
		</script>
	</body>
</html>

login 路由的页面结果如下：
imagepng

2)传参方式 2：使用 params 方式传递参数

对 路由的基本使用 的例子做改动：

<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!--改动3：-->
			<router-link to="/login/1/admin">登录</router-link>
			<router-link to="/register">注册</router-link>
			
			<router-view></router-view>
		</div>
		
		<script>
			//改动2：
			var login = {
				template: '<h2>登录组件 --- {{this.$route.params.id}} --- {{$route.params.account}}</h2>'
			};
			
			var register = {
				template: '<h2>注册组件</h2>'
			};
			
			var routerObj = new VueRouter({
				routes: [
					//改动1：
					{path: '/login/:id/:account', component: login},
					{path: '/register', component: register}
				]
			});
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router: routerObj
			});
		</script>
	</body>
</html>

login 路由的页面结果如下：
imagepng

6. 路由嵌套

<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/account">Account</router-link>
			
			<router-view></router-view>
		</div>
		
		<template id="account">
			<div>
				<h1>Account组件</h1>
				<router-link to="/account/login">登录</router-link>
				<router-link to="/account/register">注册</router-link>
				
				<!-- 在account组件下面再挂载一个router-view来显示子路由-->
				<router-view></router-view>
			</div>
		</template>
		
		<script>
			var account = {
				template: '#account'
			}
			
			var login = {
				template: '<h2>登录组件</h2>'
			}
			
			var register = {
				template: '<h2>注册组件</h2>'
			}
			
			
			var routerObj = new VueRouter({
				routes: [
					{
						path: '/account',
						component: account,
						//使用children属性实现子路由
						//注意：子路由path路径不需要带'/', 否则会以根路径来请求
						children: [
							{path: 'login', component: login},
							{path: 'register', component: register}
						]
					}
				]
			});
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router: routerObj
			});
		</script>
	</body>
</html>

运行结果如下:
imagepng

7. 路由的命名视图

<html>
	<head>
		<meta charset="utf-8" />
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<style>
			html,body {
				margin: 0;
				padding: 0;
			}
			
			.headerq {
				background-color: deepskyblue;
				height: 80px;	
			}
			.container {
				display: flex;
				height: 400px;
			}
			h1 {
				margin: 0;
				padding: 0;
				font-size: 20px;
			}
			.left {
				background: lightgray;
				flex: 2;
			}
			.main {
				background: lightpink;
				flex: 8;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			
			<div class="container">
				<!-- 根据name属性值来显示不同的组件-->
				<router-view name='left'></router-view>
				<router-view name='main'></router-view>
			</div>
		</div>
		
		<script>
			var header = {
				template: '<h1 class="headerq">Header头部区域</h1>'
			}
			
			var leftBox = {
				template: '<h1 class="left">left侧边栏区域</h1>'
			}
			
			var mainBox = {
				template: '<h1 class="main">main区域</h1>'
			} 
			
			//创建路由对象
			var routerObj = new VueRouter({
				routes: [
					{
						path: '/',
						//components属性可以挂载多个组件，并且命名，默认为default
						components: {
							'default': header,
							'left': leftBox,
							'main': mainBox
						}
					},
				]
			})
			
			var vm = new Vue({
				el: '#app',
				data: {},
				methods: {},
				router: routerObj
			});
		</script>
	</body>
</html>

运行结果如下：
imagepng

  • Vue.js

    Vue.js（读音 /vju ː/，类似于 view）是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
苏州 位置
368 5 71 82 52 24 26 96

相关帖子

回帖
Vue 学习 (四)——路由

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
StefanYang
苏州
回帖
1
 帖子
16
 积分
1801