vue-router之前端路由的学习总结
2024-09-07 22:33:51
什么是路由
- 路由就是通过互联网把信息从源地址传输到目的地的活动 --维基百科
- 举例路由器:
- 路由器提供了两种机制:路由和转送
- 路由是决定数据包从来源到目的地的路径
- 转送将输入端的数据转移到合适的输出端
- 路由里有一个非常重要的概念叫路由表
- 本质上就是一个映射表,决定了数据包的指向
开发中路由的几个阶段
- 后端路由阶段
- URL发送到服务器,服务区进行正则匹配,经过处理,生成HTML或者数据(html,css,js),返回给前端,完成一个IO操作(input:输入,output:输出)
- 前后端分离阶段
- 随着ajax出现,有了前后端分离,有点,后端专注于数据,前端专注将数据渲染到页面上,而且移动端出现后,仍然可以使用之前的后端API数据接口,只是进行不同的样式的渲染
- URL向静态服务器请求页面数据(多个页面),根据不同的URL请求并回应不同的页面
- 单页面父应用阶段
- SPA最主要的特点就是在前后端分离的基础上加了一层前端路由,也就是前端来维护一套路由规则
- 改变URL,但是页面不进行整体的刷新
路由的规则
- URL构成 :
- 协议://主机:端口/路径?查询(中文)
- scheme://host:port/path?query#fragment
- URL的hash
- URL的hash也就是'锚点',本质上是改变window.laction的href属性
- HTML5的history模式
- history接口是HTML5新增的,它有五种模式改变你URL而不断刷新页面.
- history.pushState({},'','/foo')
- history.replaceState({},'','/foo/bar')
- history.go(-1)/histroy(1)
认识vue-router
- 目前前端三大流行的框架都有自己的路由实现
- Angular的ngRouter,React的ReactRouter ,Vue的vue-router
- vue-router是Vue.js官方的路由插件,它和vue.js深度集成,适合用于构建单页项目应用
- vue-router是基于路由和组件的
- 路由用于设定访问路径,将路径和组件映射起来
- 在vue-router的单页面应用中,页面的路径的改变就是组件的切换
安装和使用Vue-router
npm install vue-router --save
(在项目运行时依然需要)- 在工程模块中使用它(因为时插件,通过Vue.use()来安装路由功能)
- 第一步:导入路由对象(
import Vue from 'vue'
+import VueRouter from 'vue-router'
),并且调用Vue.use(VueRouter)
- 第二步:创建路由实例(index.js),并且传入路由映射配置
- 第三部: 在Vue实例中挂载创建的路由实例
- 使用vue-router的步骤
- 第一步:创建路由组件
- 第二步:配置路由映射:组件和路径映射关系
- 第三部:使用路由:通过
<router-link></router-link>
和<router-view></router-view>
使用时细节
- 路由的默认路径
- 如何可以让路径默认跳到首页,并且让
<router-view>
渲染首页的内容 多配置一个映射即可
{
path:'/',
redirect:'/home'
}
redirect时重新定向
- router-link补充
- 使用router-link的to的时候,里面一定要用'/'开头
- tag属性,让其渲染成a之外的元素,
<router-link to='/' tag='li'>
- replace属性:replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
- active-class:当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
- HTML5的hist模式
- 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可
- 在router实例中使用:mode:'history'
- 路由通过代码跳转
App的vue中:
<button @linkToHome>首页</button> methods:{
linkToHome(){
this.$router.push('./home')
}
}
- 动态路由
{
path:'user/:id',
component:User
}
<div>
<h2> {{ $route.params.id}} </h2>
</div>
<router-link to='/user/123'>用户<router-link>
路由懒加载
- 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块,当这个路由被访问到的时候在加载对应的组件
const routes=[
path:'/home'
component:()=>import('../components/About')
{
}
]
方式一: 结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })}; 方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve); 方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import('../components/Home.vue')
路由嵌套
- 比如在home页面中, 我们希望通过
/home/news
和/home/message
访问一些内容. - 实现嵌套的两个步骤:
1. 创建对应的子组件,并且在路由映射中配置对应的子路由 {
path: '/home',
component: Home,
children:[
{
path:'news',
component:HomeNews
}
]
}
2. 在组件内部使用`<router-view>`标签
传递参数(params,query)
- params类型
- 配置路由:/router
- 传递方式:在path后面跟上对应的值
- 传递后形成的路径:/routr/123,/router/abc
- query的类型
- 配置路由格式:/router,也就是普通配置
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径:/router?id=123,/router?id=abc
传递方式一:
<router-link
:to="{
path:'/profile/'+123, //params
query:{name:'why',age:18} //query
}"
></router-link> 传递方式二:
methods:{
toProfile(){
this.$router.push({
path:'/profile/'+123, //params
query:{name:'why',age:18}
})
},
}
获取参数
- 获取参数通过$router对象获取
- 在使用了vue-router的应用中,路由对象会被注入到每个组件中,赋值为this.$route,并且当路由切换时,路由对象会被更新
- $router和$route的区别
- $router为VueRouter的实例,想要导航到不同的URL,则使用$router.push方法
- $route为当前router跳转对象里面可以获取name,path,query,parmas
导航守卫
- 什么是导航守卫?
- vue-router提供的导航守卫主要用来监听路由的进入和离开
- vue-router提供了beforeEach和afterEach的钩子函数,它们会在路由即将改变前和改变后触发
- 使用导航守卫beforeEach来完成标题的修改
- 首先我们可以在钩子当中定义一些标题,可以利用meta来定义,在路由组件path和component下定义
meta{ title:'关于'}
- 其次,利用导航守卫,修改我们的标题
// to:即将进入目标的路由对象,from当前导航的即将要离开的对象,next调用了该方法,才能进入下一个钩子
router.beforeEach(to,from,next) =>{
window.document.title = to.meta.title
next()
}
- 导航守卫补充
- 1.如果是后置钩子(after),不需要主动调用next()函数
- 2.上面使用的是全局守卫,其实还有路由独享的守卫,组件内的守卫
- 3.其它可以去官方进行学习
keep-alive遇见vue-router
- keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。
- 它们有两个非常重要的属性:
- include - 字符串或正则表达,只有匹配的组件会被缓存
- exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
- router-view 也是一个组件,如果直接被包在 keep-alive 里面,所有路径匹配到的视图组件都会被缓存:
<keep-alive exclude="Profile">
<router-view></router-view>
</keep-alive>
最新文章
- webservice报错Message part refundRequest was not recognized. (Does it exist in service WSDL?)
- [翻译]-马丁&#183;福勒-page对象
- 管理批量邮箱 FOXMAIL 和网易闪电邮(PC端)有什么区别? 对比
- Linux下php安装phpredis
- Integer Inquiry_hdu_1047(大数).java
- The Viewport Transformation
- 专题合集:深入Android媒体存储服务
- iOS开发笔记17:自定义相机拍照
- nginx 提示the ";ssl"; directive is deprecated, use the ";listen ... ssl"; directive instead
- ASP.NET在MVC控制器中获取Form表单值的方法
- vhdl 数组
- 地址栏的路由输入不匹配时候,设置默认跳转页面(redirect)
- Metrics.NET step by step使用Metrics监控应用程序的性能
- python --- 10 *args **kwargs 命名空间 作用域 函数的嵌套
- sgu 169 Numbers
- 【原创】when.js2.7.1源码解析
- Java编程的逻辑 (63) - 实用序列化: JSON/XML/MessagePack
- Asp.Net Web Api中使用Swagger
- Dream------scala--函数定义、流程控制、异常处理
- iOS 数组集合操作(交集,并集,差集,子集)
热门文章
- 细解JavaScript ES7 ES8 ES9 新特性
- VUEday01
- django基础之day04,必知必会13条,双下划线查询,字段增删改查,对象的跨表查询,双下划线的跨表查询
- 类型,值,变量知识总结(js)
- 解决logstash.outputs.elasticsearch[main] Could not index event to Elasticsearch status 404
- keras模型保存和权重保存
- oracle数据库执行sql文件
- 蒟蒻的PKUWC2019划水记(更新ing)
- 一个故事搞懂Java并发编程
- Http中URI协议 和URL协议的区别和联系