vue-VueRouter-基础功能详解

vue-VueRouter-基础功能详解


目录




内容

0、简介

Vue Router是vue.js官方路由管理器。它和vue.js的核心深度集成,可以非常方便的用于SPA单页面的开发。

1、基础功能

  • 支持HTML5历史模式或hash模式
  • 支持嵌套路由
  • 支持路由参数
  • 支持编程式路由
  • 支持命名路由

2、使用步骤

  1. 引入相关库文件:vue-router.js
  2. 添加路由链接:router-link
  3. 添加路由占位符:router-view
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到Vue根实例中
  • 实例代码2-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>02_router</title>
      <body>
      <div id="app">
      	<router-link to="/login">登录</router-link>
      	<router-link to="/register">注册</router-link>
    
      	<router-view />
      </div>
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      </head>
      <script>
      	const login = {
      		template: `
      			<h3>登录组件</h3>
      		`
      	}
      	const register = {
      		template: `
      			<h3>注册组件</h3>
      		`
      	}
      	// 路由实例
      	const router = new VueRouter({
      		// 路由规则
      		routes: [
      			{path: '/login', component: login},
      			{path: '/register', component: register},
      		]
      	})
      	const app = new Vue({
      		el: '#app',
      		data: {
    
      		},
      		methods:{
    
      		},
      		components: {
      			login,
      			register
      		},
      		router
      	 });
       </script>
      </body>
      </html>
    

3、路由重定向

实例2-1中,打开页面默认首页组件没有,这样体验很差,我们希望默认路由指向登录组件,这时需要用到路由重定向:redirect

  • 适用场景:默认首页组件显示

  • 实例3-1:同上,这里添加默认路由

      {path: '/', redirect: 'login'}
    
  • 效果:打开默认显示登录组件

4、嵌套路由

4.1、嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容

4.2、父级路由组件模板

  • 父级路由链接

  • 父组件路由占位符

      <router-link to="父路径1">链接显示内容</router-link>
      <router-link to="父路径2">链接显示内容</router-link>
      ...
      
      // 路由占位符
      <router-view></router-view>
    

4.3、子路由模板

  • 子级路由链接

  • 子级路由占位符

      const 父级模板 = {
      			template: `
      				<router-link to="子路径1">链接显示内容</router-link>
      				<router-link to="子路径2">链接显示内容</router-link>
      				...
    
      				// 路由占位符
      				<router-view></router-view>
      			`
      		}
    

4.4、示例

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>路由嵌套</title>
	</head>
	<body>
	<div id="app">
		<router-link to="/user">用户</router-link>
		<router-link to="/role">角色</router-link>

		<router-view />
	</div>
	<script src="../../node_modules/vue/dist/vue.js"></script>
	<script src="../../node_modules/vue-router/dist/vue-router.js"></script>

	<script>
		const User = {
			template: `
				<div>
					<h3>用户组件</h3>
					<router-link to='/login'>登录</router-link>
					<router-link to='/register'>注册</router-link>

					<router-view />
				</div>
			`
		}
		const Login = {
			template: `
				<h3>登录组件</h3>
			`
		}
		const Register = {
			template: `
				<h3>注册组件</h3>
			`
		}
		const Role = {
			template: `
				<div>角色组件</div>
			`
		}
		// 路由实例
		const router = new VueRouter({
			// 路由规则
			routes: [
				{path: '/', redirect: '/user'},
				{
					path: '/user',
					component: User,
					children: [
						{path: '/login', component: Login},
						{path: '/register', component: Register}
				]},
				{path: '/role', component: Role}
			]
		})
		const vm = new Vue({
			el: '#app',
			router
		 });
	 </script>
	</body>
	</html>
  • 效果图4.4-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UKehkCPu-1596036376847)(./images/2020-07-28_router-nest.png)]

5、动态路由匹配

5.1、动态匹配路由的基本用法

应用场景:通过动态路由参数的模式进行路由匹配

	// 路由规则配置
	const router = new VueRouter({
		routes: [
			{path: '/路径/:变量名', component: 组件名}
		]
	})
	
	// 参数获取:$goute.params.变量名
	const 组件名 = {
		template: `
			<div> ...{{ $route.params.变量名 }}...</div>
		`
	}
  • 示例代码5.1-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>05_router-dynamic</title>
      	<style>
      		a:hover {
      			color: chocolate;
      		}
      	</style>
      </head>
      <body>
      <div id="app">
      	<router-link to="/user/1">用户1</router-link>
      	<router-link to="/user/2">用户2</router-link>
      	<router-link to="/user/3">用户3</router-link>
    
      	<router-view></router-view>
      </div>
    
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      <script>
      	const User = {
      		template: `
      			<div>
      			   User {{ $route.params.id }}
      			</div>
      		`
      	}
      	const router = new VueRouter({
      		routes: [
      			{path: '/user/:id', component: User}
      		]
      	})
      	const app = new Vue({
      		el:'#app',
      		data:{},
      		router,
      		methods:{}
      	});
      </script>
      </body>
      </html>
    
  • 效果图示5.1-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8AzbqV9-1596036376849)(./images/2020-07-28_router-dynamic.png)]

5.2、路由组件传递参数

$route与队友路由形成高度耦合,不够灵活,所以可以使用props将组件和路由解耦

5.2.1、props的值为布尔值

	const router = new VueRouter({
		routes: [
			// 如果props被设置为true,route.params将会被设置为组件属性
			{path: '/user:id', component: User, props: true}
		]
	})
	
	const User = {
		props: ['id'],
		template; '<div>用户ID:{{ id }}</div>'
	}
  • 示例5.2.1-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>05_router-dynamic</title>
      	<style>
      		a:hover {
      			color: chocolate;
      		}
      	</style>
      </head>
      <body>
      <body>
      <div id="app">
      	<router-link to="/user/1">用户1</router-link>
      	<router-link to="/user/2">用户2</router-link>
      	<router-link to="/user/3">用户3</router-link>
    
      	<router-view></router-view>
      </div>
    
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      <script>
      	const User = {
      		props: ['id'],
      		template: `
      			<div>
      			   User ID:{{ id }}
      			</div>
      		`
      	}
      	const router = new VueRouter({
      		routes: [
      			{path: '/user/:id', component: User, props: true}
      		]
      	})
      	const app = new Vue({
      		el:'#app',
      		data:{},
      		router,
      		methods:{}
      	});
      </script>
      </body>
      </html>
    
  • 效果图示5.2.1-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XuFAwBsp-1596036376851)(./images/2020-07-28_router-dynamic-props.png)]

5.2.2、props的值为对象类型

const router = new VueRouter({
	routes: [
		// 如果props是一个对象,它会被按原样设置为组件属性
		{path: '/user:id', component: User, props: {uname: 'zhangsan', age: 12}}
	]
})

const User = {
	props: ['uname', 'age'],
	template: `
		<div>用户信息:{{ uname + '----' + age }}</div>
	`
}
  • 示例5.2.2-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>05_router-dynamic</title>
      	<style>
      		a:hover {
      			color: chocolate;
      		}
      	</style>
      </head>
      <body>
      <body>
      <div id="app">
      	<router-link to="/user/1">用户1</router-link>
      	<router-link to="/user/2">用户2</router-link>
      	<router-link to="/user/3">用户3</router-link>
    
      	<router-view></router-view>
      </div>
    
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      <script>
      	const User = {
      		props: ['id', 'uname', 'age'],
      		template: `
      			<div>
      				用户ID: {{ id }}<br>
      				用户信息:{{ uname + '----' + age}}
      			</div>
      		`
      	}
      	const router = new VueRouter({
      		routes: [
      			{
      				path: '/user/:id', 
      				component: User, 
      				props: {
      					uname: 'zhangsan',
      					age: 23
      				}
      			}
      		]
      	})
      	const app = new Vue({
      		el:'#app',
      		data:{},
      		router,
      		methods:{}
      	});
      </script>
      </body>
      </html>
    
  • 效果图示5.2.2-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2qyGSwl-1596036376852)(./images/2020-07-28_router-dynamic-props-object.png)]

  • 问题:为什么id没有打印出来呢?,见下回分解

5.2.3、props的值为函数类型

const router = new VueRouter({
	routes: [
		// 如果props是一个函数,则这个函数接收route对象为自己的参数
		{
			path: '/user',
			component: User,
			props: route => ({uname: 'zhangsan', age: 33, id: route.params.id})
		}
	]
})

const User = {
	props: ['uname', 'age', 'id'],
	template: `
		<div>
            用户ID: {{ id }}<br>
            用户信息:{{ uname + '----' + age}}
        </div>
	`
}
  • 示例代码5.2.3-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>05_router-dynamic</title>
      	<style>
      		a:hover {
      			color: chocolate;
      		}
      	</style>
      </head>
      <body>
      <body>
      <div id="app">
      	<router-link to="/user/1">用户1</router-link>
      	<router-link to="/user/2">用户2</router-link>
      	<router-link to="/user/3">用户3</router-link>
    
      	<router-view></router-view>
      </div>
    
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      <script>
      	const User = {
      		props: ['id', 'uname', 'age'],
      		template: `
      			<div>
      				用户ID: {{ id }}<br>
      				用户信息:{{ uname + '----' + age}}
      			</div>
      		`
      	}
      	const router = new VueRouter({
      		routes: [
      			{
      				path: '/user/:id', 
      				component: User, 
      				props: route => ({
      					uname: 'zhangsan',
      					age: 33,
      					id: route.params.id
      				})
      			}
      		]
      	})
      	const app = new Vue({
      		el:'#app',
      		data:{},
      		router,
      		methods:{}
      	});
      </script>
      </body>
      </html>
    
  • 效果示例5.2.3-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNZINsdJ-1596036376853)(./images/2020-07-28_router-dynamic-props-func.png)]

6、命名路由

6.1、命名规则

为了方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。

const router = new VueRouter({
	routes: [
		{
			name: 'user'
			path: '/user',
			component: User
		}
	]
})

<router-link :to="{name: 'user', params: {id: 123}}"
router.push({name: 'user', params: {id: 123}})
  • 示例6.1-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>05_router-dynamic</title>
      	<style>
      		a:hover {
      			color: chocolate;
      		}
      	</style>
      </head>
      <body>
      <body>
      <div id="app">
      	<router-link to="/user/1">用户1</router-link>
      	<router-link to="/user/2">用户2</router-link>
      	<router-link :to="{name: 'user', params: {id: 123}}">用户3</router-link>
    
      	<router-view></router-view>
      </div>
    
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      <script>
      	const User = {
      		props: ['id', 'uname', 'age'],
      		template: `
      			<div>
      				用户ID: {{ id }}<br>
      				用户信息:{{ uname + '----' + age}}
      			</div>
      		`
      	}
      	const router = new VueRouter({
      		routes: [
      			{
      				name: 'user',
      				path: '/user/:id', 
      				component: User, 
      				props: route => ({
      					uname: 'zhangsan',
      					age: 33,
      					id: route.params.id
      				})
      			}
      		]
      	})
      	const app = new Vue({
      		el:'#app',
      		data:{},
      		router,
      		methods:{}
      	});
      </script>
      </body>
      </html>
    
  • 效果图示6.1-1:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w1KqxZMO-1596036376855)(./images/2020-07-28_router-name.png)]

7、编程式导航

7.1、基本用法

常用编程式导航API如下:

  • this.$router.push(hash地址):跳转到指定的hash地址

  • this.$router.go(n):前进或者后退n个历史记录

  • 示例代码7.1-1:

      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
      	<meta charset="UTF-8">
      	<meta name="viewport" content="width=device-width, initial-scale=1.0">
      	<title>编程式导航</title>
      </head>
      <body>
      <div id="app">
      	<router-link to="/login">登录</router-link>
      	<router-link to="/register">注册</router-link>
    
      	<router-view />
      </div>
      <script src="../../node_modules/vue/dist/vue.js"></script>
      <script src="../../node_modules/vue-router/dist/vue-router.js"></script>
      <script>
      	const login = {
      		template: `
      			<div>
      				<h3>登录组件</h3>
      				<button @click="goRegister">->注册页面</button>
      			</div>
      		`,
      		methods: {
      			goRegister() {
      				this.$router.push('/register')
      			}
      		},
      	}
      	const register = {
      		template: `
      			<div>
      				<h3>注册组件</h3>
      				<button @click="goBack">返回</button>
      			</div>
      		`,
      		methods: {
      			goBack() {
      				this.$router.go(-1)
      			}
      		},
      	}
      	// 路由实例
      	const router = new VueRouter({
      		// 路由规则
      		routes: [
      			{path: '/', redirect: '/login'},
      			{path: '/login', component: login},
      			{path: '/register', component: register},
      		]
      	})
      	const app = new Vue({
      		el: '#app',
      		router
      	 });
       </script>
      </body>
      </html>
    
  • 效果:自己试

后记

vue官网地址:https://cn.vuejs.org/

本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785

前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页