2021-06-01

最新推荐文章于 2024-10-05 01:22:45 发布

superkhadijah

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量63

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/superkhadijah/article/details/117439995

版权

前端路由

Vue.js以官方插件的形式提供了对路由的支持
Vue.router3.0.1支持嵌套路由、组件惰性、载入、试图切换动画、具名路径等特性。

1. 路由是什么

是根据不同url地址展示不同内容或页面（解析url分发，处理不同逻辑，早期后台处理）

2. 前端路由

前端路由与后端路由在技术上实现不一样，但原理相同。
Hash （js读到url#后的内容、解析相应不同路径的逻辑处理）
**->** history API (HTML5的可操作浏览器的session history)

使用场景
单页面应用（SPA），前后端分离后端不提供路由
优点：后端不再处理路由，不用换页面就请求服务器，减少延迟，用户体验好
某些场景用Ajax请求，可是页面无刷新URL不变
缺点：使用浏览器的前进后退会重新发起请求，未合理利用缓存

3. Vue Router基本使用
路由连接单页面应用各页面的链条
安装：
若有使用webpack，则cnpm install vue-router --save安装
因Vue Router为一个Vue插件，需再Vue的全局应用中通过Vue.use()将其纳入Vue实例
项目中，main.js是程序入口文件，所有全局性配置文件在其中进行
在src下router文件夹中的index.js文件中有一下引用：
import Vue from ‘vue’
impoert Router from ‘vue-router’
Vue.use(Router)
在main.js中导入router中的index文件，即可使用路由配置的信息
import router from ‘./router’ new Vue时加入router
建立路由器模块：
在router/index.js中new Router命令创建路由，一个路由一个对象。
路由实现三部分：name, path, compoment(组件)
export default new Router({
routers:[{path:ll,name:‘Hello Word’,component},{},{}] })
在导入Helloworld组件时，导入的是component/Helloworld.vue,因在webpack中配置了，vue可省
*.vue是vue的单文件组件格式，可同时包括模板定义、样式定义和组件定义
启动路由器
在main.js入口文件启用：import后，创建和挂在跟实例，通过router配置参数注入路由，从而应用拥有路由功能，如下：
import router from ‘./router’
new Vue({
el:’#app’,
router,
template: ‘’,
component: {App}
})
组件渲染过程：
1)在router/index.js中配置后，路由匹配到的组件会渲染到App.vue的:
App.vue文件：

		<template>
			<div>
				<router-view></router-view>
			</div>
		</template>

	2)App.vue会渲染到index.html中

			<html>
				<div id='app'></div>
			</html>

路由重定向
路由跳转：页面跳转：通过routers配置完成
重定向的目标可为命名的由redirect:‘foo’、路径/b或一个方法to=>（目标路由为参return重定向值)
路由懒加载
场景：打包构建应用时，JavaScript包变很大，影响页面加载。将不同路由对应的组件分割成不同代码块，当路由被访问时才加载对应组件，较高效。
实现：结合Vue异步组件和Webpack的代码分割功能，可轻松实现路由懒加载。
异步组件：在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
懒加载：不一次性加载所有组件，访问到组件才加载。如此对组件多的应用会提高首次加载速度。
< router-link>
< router-link>组件支持在具有路由功能的页面单击导航？等同于$router.push()
< router-link :to=‘home’>Home
路由对象属性
常用路由对象属性：
$route.path 当前路由路径
$route.params 动态片段和全匹配片段
$route.query 路由的查询对象
$route.hash 路由的hash值
$route.fullPath 完整路径
$route.matched 路由记录
页面间导航
router.push() 会向history栈加新纪录
router.replace() 替换掉当前history记录等价于
router.go(n) 在history记录中向前n或后-n进多少步