0
点赞
收藏
分享

微信扫一扫

vue前端路由

沉浸在自己的世界里 2022-05-01 阅读 225
前端vue.jsjavascript

路由的基本概念与原理

路由

路由是一个比较广义和抽象地概念，路由地本质就是对应关系
在开发中,路由分为：

  • 前端路由
  • 后端路由

后端路由

概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器之间的对应关系

SPA (Single Page Application)

  • 后端渲染(存在性能问题)
  • Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操f作)
  • SPA (Single PageApplication）单页面应用程序:整个网站只有一个页面，内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作
  • SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)
  • 在实现SPA过程中，最核心的技术点就是前端路由

前端路由

概念：根据不同的用户事件，显示不同的页面
本质：用户事件与事件处理函数之间的对应关系
前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容

实现简单前端路由
基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

// 监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
window.onhashchange = function() {
	//通过location.hash获取到最新的hash值
}

Vue Router

Vue Router是vue.js官方的路由管理器。和vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能：

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

Vue-router的基本使用步骤

基本使用步骤

  1. 引入相关的库文件
  2. 添加路由链接
  3. 添加路由填充位
  4. 定义路由组件
  5. 配置路由规则并创建路由实例
  6. 把路由挂载到Vue根实例中
// 1. 引入相关的库文件
<!--导入vue文件，为全局window对象挂载Vue构造函数-->
<script src="./lib/vue_2.5.2.js"></script>

<!--导入vue-router文件，为全局window对象挂载VueRouter构造函数-->
<script src="./lib/vue-router_3.0.2.js"></script>
<div id="app">
	// 2.添加路由链接
	<!--router-link 是vue中提供的标签，默认会被渲染成为a标签-->
	<!--to属性默认会被渲染为href属性 以#开头的hash地址-->
	<router-link to="/user">User</router-link>
	<router-link to="/register">register</router-link>
	
	// 3. 添加路由填充位(也叫路由占位符）
	<!-- 将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置-->
	<router-view></router-view>
</div>
<script>
	// 4. 定义路由组件
	var User = {
		template:'<div>User</div>'
	}
	var Register = {
		template:'<div>Register</div>'
	}
	
	//  5. 配置路由规则并创建路由实例
	// 创建路由实例对象
	var router = new VueRouter ({
		// routes 是路由规则数组
		routes: [
			//每个路由规则都是一个配置对象，其中至少包含path和component两个属性
			//path 表示当前路由规则匹配的hash地址
			// component 表示当前路由规则对应要展示组件
			{path:'/user',component:User},
			{path:'/register',component:Register}
		]
	})

	// 6. 把路由挂载到Vue根实例中
	var vm = new vue({
		el:'#app',
		// 为了能够让路由规则生效，必须  把路由对象挂载到vue实例对象上
		router:router
	})

路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面；
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由地重定向：

var router = new VueRouter({
	routes:[
		//其中，path表示需要被重定向地原地址，redirect表示将要被重新定向到地新地址
		{path:'/',redirect:'/user'},
		{path:'/user',component:User},
		{path:'/register',component:Register}
		]

Vue-router的嵌套路由用法

嵌套路由用法

1.嵌套路由功能分析

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

2.父级路由组件模板

  • 父级路由链接
  • 父组件路由填充位
<p>
	<router-link to="user">User</router-link>
	<router-link to="register">Register</router-link>
</p>
<div>
	<!--控制组件地显示位置 -->
	<router-view></router-view>
</div>

3.子集路由模板

  • 子级路由链接
  • 子级路由填充位
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/>
	</div>'
}

4.嵌套路由配置

  • 父级路由通过children属性配置子集路由
const router = new VueRouter({
	routes:[
		{path:'/user',component:User},
		{
			path:'/register',
			component:Register,
			// 通过children属性，为/register添加子路由规则
			children： [
				{path:'/register/tab1',component:Tab1},
				{path:'/register/tab2',component:Tab2},
			]
		}
	]
})

Vue-router动态路由匹配方法

动态路由匹配地基本用法

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

var router = new VueRouter({
	routes:[
		//动态路径参数 以冒号开头
		{path:'/user/:id',component:User}
	]
})

// 访问id值
const User = {
	// 路由组件中通过$router.params获取路由参数
	template:'<div>User{($route.params.id)}</div>'
}

动态组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
1.props的值为布尔类型

const router= new VueRouter({
	routes:[
		//如果props被设置为true，route.params将会被设置为组件属性
		{ path:'/user/:id',component:User,props:true }
	]
})

const User = {
	// 使用props接收路由参数
	props:['id'], 
	// 使用路由参数
	template：'<div>用户ID：{{id}}</div>'
}

2.props的值为对象类型

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

const User = {
	// 使用props接收路由参数
	props:['uname','age'], 
	// 使用路由参数
	template：'<div>用户信息：{{uname + '---' + age}}</div>'
}

3.props的值为函数类型

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

const User = {
	// 使用props接收路由参数
	props:['uname','age','id'], 
	// 使用路由参数
	template：'<div>用户信息：{{id + '---' +uname + '---'+age}}</div>'
}

Vue-router命名路由

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

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

//通过命名路由实现页面的跳转
<router-link :to="{name:'user',params:{id:1} }">User</router-link>
router.push({name:'user',params:{id:1}})

Vue-router编程式导航用法

页面导航的两种方式*

  • 声明式导航：通过点击链接实现导航的方式，叫做声明式导航；
    例如：普通网页中的a链接或vue中的router-link

  • 编程式导航：通过调用JavaScript的形式的API实现导航的方式，叫做编程式导航。
    例如普通网页中的location.href

编程式导航基本用法

常用的编程式导航API：

  • this.$router.push('hash地址’）
  • this.$router.go(n) ,go方法是实现前进与后退的
const User = {
	template:'<div><button @click="goRegister>跳转到注册页面</button></div>',
	methods:{
		goRegister:function() {
			// 用编程的方式控制路由跳转
			this.$router.push('/register');
		}
	}
}

编程式导航参数规则

router.push()方法的参数规则

// 字符串（路径名称）
router.push('/home')
// 对象
router.push( {path:'/home'})
// 命名的路由（传递参数）
router.push({ 
	name:'/user',
	params:{
		userId:1
	}
})
// 带查询参数，变成/register?uname=lisi
router.push({
	path:/register',
	query:{
		uname:'lisi'
	}
})
举报

相关推荐

Vue前端路由

vue.js

Vue 前端路由

前端vue.jsjavascript

Vue Router前端路由

vuevue.jsVueide应用程序Python后端开发

前端框架Vue学习 ——（七）Vue路由（Vue Router）

前端框架vue.js学习Vue RouterVue路由Python后端开发

前端进阶Vue框架-----嵌套路由

vue.js前端javascript

前端vue路由的概念与原理

vue.js前端vue路由hash 地址前端路由

前端-vue基础102-命名路由

htmlvue.jsjavascriptHtml/CSS前端开发

前端vue路由模块拆分归类【理解版】

前端vue.jsjavascript无法加载后台管理编程语言

前端Vue入门-day06-路由进阶

chatgpt人工智能

前端路由。

前端vue.js哈希算法
0 条评论