欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue基础 前端路由

程序员文章站 2022-07-02 14:17:32
路由本质是对应关系1、后端路由概念：根据不同的用户URL请求，返回不同的内容本质：URL请求地址与服务器资源之间的对应关系2、SPA单页应用程序，整个网站只有一个页面，内容变化通过ajax局部更新实现，支持浏览器的前进后退操作实现原理：基于url地址的hash（hash的变化会导致浏览器记录访问历史的变化，但不会触发新的url请求），核心技术是前端路由3、前端路由概念：根据不同的用户事件，显示不同的页面内容本质：用户事件与事件处理函数之间的对应关系模拟路由

路由

本质是对应关系
1、后端路由
概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系
2、SPA
单页应用程序，整个网站只有一个页面，内容变化通过ajax局部更新实现，支持浏览器的前进后退操作
实现原理：基于url地址的hash（hash的变化会导致浏览器记录访问历史的变化，但不会触发新的url请求），核心技术是前端路由
3、前端路由
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

模拟路由

<div id="app">
			<a href="#ldh">ldh</a>
			<a href="#zxy">zxy</a>
			<a href="#lm">lm</a>
			<a href="#gfc">gfc</a>
			<component :is="msg"></component>
		</div>
		<script type="text/javascript">
			var ldh = {
				template:`<h1>刘德华</h1>`
			}
			var zxy = {
				template:`<h1>张学友</h1>`
			}
			var lm = {
				template:`<h1>黎明</h1>`
			}
			var gfc = {
				template:`<h1>郭富城</h1>`
			}
			const vm = new Vue({
				el:"#app",
				data:{
					msg:"ldh"
				},
				components:{
					ldh:ldh,
					zxy:zxy,
					lm:lm,
					gfc:gfc
				}
			})
			window.onhashchange = function(){
				switch(location.hash.slice(1)){
					case 'ldh':
					vm.msg = "ldh"
					break	
					case 'zxy':
					vm.msg = "zxy"
					break	
					case 'lm':
					vm.msg = "lm"
					break	
					case 'gfc':
					vm.msg = "gfc"
					break	
				}
			}
		</script>

Vue-router

功能：
1、支持html5历史模式或hash模式
2、支持嵌套路由
3、支持路由参数
4、支持编程式路由
5、支持命名路由
步骤：
1、引入库文件
直接下载/CDN：https://unpkg.com/vue-router/dist/vue-router.js
或：npm install vue-router
2、添加路由链接
使用<router-link to="/..."></router-link>
router-link是vue提供的标签，默认被渲染为a标签
to属性默认被渲染为href属性
to属性值默认被渲染为#开头的hash地址
3、添加路由填充位
也叫路由占位符。将来通过路由规则匹配到的组件，会被渲染到router-view标签所在的位置
<router-view></router-view>
4、定义路由组件
采用对象形式定义组件内容
5、配置路由规则并创建路由实例
通过VueRouter构造函数的实例对象属性routes创建路由规则，routes是一个数组，里面每一个对象都是一个规则，规则至少包含path和component两个属性，path指路由的hash值，component指对应的hash注册对应的组件
6、把路由挂载到vue根实例中
使用router名称挂载即可

<div id="app">
			<router-link to="/user">user</router-link>
			<router-link to="/register">register</router-link>
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			const User = {
				template:"<h1>user页</h1>"
			}
			const Register = {
				template:"<h1>Register页</h1>"
			}
			const router = new VueRouter({
				routes:[
					{
						path:'/user',
						component:User
					},
					{
						path:'/register',
						component:Register
					}
				]
			})
			const vm = new Vue({
				el:"#app",
				router
			})
		</script>

路由重定向

通过redirect属性进行重定向

{
	path:'/',
	redirect:"/user"
}

嵌套路由

1、设置父模板
2、对应的父模板下定义子模板
3、对应的父规则下定义子规则

<!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="/user">user</router-link>
			<router-link to="/register">register</router-link>
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			const User = {
				template:"<h1>user页</h1>"
			}
			const Register = {
				template:`
					<div>
						<h1>Register页</h1>
						<hr/>
						<router-link to="/register/tab1">tab1</router-link>
						<router-link to="/register/tab2">tab2</router-link>
						<router-view></router-view>
					</div>
				`
			}
			const Tab1 = {
				template:"<h4>tab1页</h4>"
			}
			const Tab2 = {
				template:"<h4>tab2页</h4>"
			}
			const router = new VueRouter({
				routes:[
					{
						path:'/',
						redirect:"/user"
					},
					{
						path:'/user',
						component:User
					},
					{
						path:'/register',
						component:Register,
						children:[
							{
								path:"/register/tab1",
								component:Tab1
							},
							{
								path:"/register/tab2",
								component:Tab2
							}
						]
					}
				]
			})
			const vm = new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

动态路由匹配

	<router-link to="/user/1">user1</router-link>
	<router-link to="/user/2">user2</router-link>
	<router-link to="/user/3">user3</router-link>
	const User = {
		template:"<h1>user页id={{$route.params.id}}</h1>"
	}
	{
		path:'/user/:id',
		component:User
	},

路由参数

通过props属性进行传递
props可以为布尔值类型、对象类型、函数类型
布尔值类型：

<router-link to="/user/1">user1</router-link>
	<router-link to="/user/2">user2</router-link>
	<router-link to="/user/3">user3</router-link>
		const User = {
		props:["id"],
		template:"<h1>user页id={{id}}</h1>"
	}
		{
		path:'/user/:id',
		component:User，
		props:true
	},

对象类型：

<router-link to="/user/1">user1</router-link>
	<router-link to="/user/2">user2</router-link>
	<router-link to="/user/3">user3</router-link>
		const User = {
		props:["username","age"],
		template:"<h1>user页{{username+age}}</h1>"
	}
		{
		path:'/user/:id',
		component:User，
		props:{username:"zhangsan",age:20}
	},

函数类型：

<router-link to="/user/1">user1</router-link>
	<router-link to="/user/2">user2</router-link>
	<router-link to="/user/3">user3</router-link>
		const User = {
		props:["id"，"username","age"],
		template:"<h1>user页{{username+age+id}}</h1>"
	}
		{
		path:'/user/:id',
		component:User，
		props:(route) => ({
					username:"lisi",
					age:40,
					id:route.params.id
			})
	},

命名路由

<router-link :to={name:"user",params:{id:3}}>user3</router-link>
	{
name:"user",
path:'/user/:id',
props:(route) => ({
username:"lisi",
age:40,
id:route.params.id
})
},

编程式导航

$route.push()：跳转到指定路由
$route.go()：值为1为前进，-1为后退
push()：参数规则：
1、字符串（路径名称）
router.push（"/home"）
2、对象
router.push（{path:"/home"}）
3、命名的路由（传递参数）
router.push（{name:’/user’,params:{id:123}}）
4、带查询参数，变成/register?id=123
router.push（{path:’/register’,query:{id:123}}）

	const User = {
		props:["id","username","age"],
		template:`
		<div>
		<h1>user页{{username+age+id}}</h1>
		<button @click="handle">点我跳转</button>
		</div>
		`,
			methods:{
					handle:function(){
						this.$router.push('/register')
					}
				}
			}

const Register = {
				template:`
					<div>
						<h1>Register页</h1>
						<hr/>
						<router-link to="/register/tab1">tab1</router-link>
						<router-link to="/register/tab2">tab2</router-link>
						<router-view></router-view>
						<button @click="goback">点我后退</button>
					</div>
				`,
				methods:{
					goback:function(){
						this.$router.go(-1)
					}
				}
			}

案例

路由管理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="./bootstrap.css">
		<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-view></router-view>
		</div>
		<script type="text/javascript">
			const App = {
				template:`
					<div>
						<div>
							<ul class="nav nav-pills">
							  <li role="presentation"><router-link to="/home">Home</router-link></li>
							  <li role="presentation"><router-link to="/profile">Profile</router-link></li>
							  <li role="presentation"><router-link to="/messages">Messages</router-link></li>
							  <li role="presentation"><router-link to="/more">More</router-link></li>
							  <li role="presentation"><router-link to="/love">Love</router-link></li>
							</ul>
						</div>
						<div>
							<router-view></router-view>
						</div>
					</div>
				`
			}
			const home = {
				data(){
					return {
						list:[
							{
								id:1,
								name:"刘德华",
								age:20
							},
							{
								id:2,
								name:"张学友",
								age:30
							},
							{
								id:3,
								name:"郭富城",
								age:40
							},
							{
								id:4,
								name:"黎明",
								age:50
							}
						]
					}
				},
				template:`
					<div>
						<h1>Home</h1>
						<table class="table table-striped">
						  <thead>
							<th>编号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>操作</th>
						  </thead>
						  <tbody>
						  	<tr v-for="item in list">
						  		<td>{{item.id}}</td>
						  		<td>{{item.name}}</td>
						  		<td>{{item.age}}</td>
						  		<td>
						  			<a href="javascript:;" @click="handle(item.id)">详情</a>
						  		</td>
						  	</tr>
						  </tbody>
						</table>
					</div>
				`,
				methods:{
					handle:function(id){
						this.$router.push("/userInfo/"+id)
					}
				}
			}
			const userInfo ={
				props:["id"],
				template:`<h1>详情页+---+{{id}}</h1>`
			}
			const profile = {
				template:`<h1>Profile</h1>`
			}
			const messages = {
				template:`<h1>Messages</h1>`
			}
			const more = {
				template:`<h1>More</h1>`
			}
			const love = {
				template:`<h1>Love</h1>`
			}
			const router = new VueRouter({
				routes:[
					{
						path:"/",
						component:App,
						redirect:"/home",
						children:[
							{
								path:"/home",
								component:home
							},
							{
								path:"/userInfo/:id",
								component:userInfo,
								props:true
							},
							{
								path:"/profile",
								component:profile
							},
							{
								path:"/messages",
								component:messages
							},
							{
								path:"/more",
								component:more
							},
							{
								path:"/love",
								component:love
							}
						]
					}
				]
			})
			
			const vm = new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

本文地址：https://blog.csdn.net/weixin_42667066/article/details/109236865

相关标签： Vue 1024程序员节

上一篇： 移动端跨平台技术演进之路

下一篇： javaweb-css基础(一)

推荐阅读