-
URL的hash也就是锚点(#), 本质上是改变 window.location 的 href 属性.
-
我们可以通过直接赋值 location.hash 来改变 href , 但是页面不发生刷新
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.
1.4.1、pushState
1.4.2、replaceState
1.4.3、history.go()
-
history.back()
等价于history.go(-1)
-
history.forward()
等价于history.go(1)
-
这三个接口等同于浏览器界面的前进后退
================================================================================
目前前端流行的三大框架, 都有自己的路由实现:
-
Angular的ngRouter
-
React的ReactRouter
-
Vue的vue-router
我们的重点是vue-router,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/
vue-router是基于路由和组件的
-
路由用于设定访问路径, 将路径和组件映射起来
-
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换
因为我们已经学习了webpack, 后续开发中我们主要是通过工程化的方式进行开发的.所以在后续, 我们直接使用npm来安装路由即可.
- 安装 vue-router
npm install vue-router --save
- 在模块化工程中使用它(因为它是一个插件,所以可以通过
Vue.use()
来安装路由功能)
// 1.导入 Vue 和 VueRouter 的包
import Vue from ‘vue’
import VueRouter from ‘vue-router’
// 2.调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3.创建 VueRouter 对象
const routes = [
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes
})
// 4.将 router 对象传入到 vue 实例
export default router
-
使用 vue-router 的步骤
-
创建路由组件
-
配置路由映射:组件和路径映射关系
-
使用路由: 通过
<router-link>
和<router-view>
声明路由链接和占位符
2.1.1、使用vue-router
在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:
如果我们在使用 vueCLI 初始化项目的时候安装了 router,那么就会自动生成 router 文件夹,里面有 index.js 如下
// 1.导入 Vue 和 VueRouter 的包
import Vue from ‘vue’
import VueRouter from ‘vue-router’
// 2.调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3.创建 VueRouter 对象
const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: () => import(/* webp ackChunkName: “about” */ ‘…/views/About.vue’)
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes
})
// 4.将 router 对象传入到 vue 实例
export default router
在 src/ main.js 入口文件中,导入并挂载路由模块。示例代码如下:
import Vue from ‘vue’
import App from ‘./App.vue’
// 1.导入路由模块
import router from ‘./router’
Vue.config.productionTip = false
new Vue({
// 2.挂载路由模块
router,
render: h => h(App)
}).$mount(‘#app’)
在App.vue 主组件中使用路由
-
<router-link>
声明路由链接 -
<router-view>
占位符
Home |
About
2.1.2、声明路由匹配规则
在 src/router/index.js 路由模块中,通过 routes 数组 声明路由的匹配规则。示例代码如下:
const routes = [ // 在 routes 数组中,声明路由的匹配规则
{
// path 表示要匹配的 hash 地址,component 表示要展示的路由组件
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
// 这种方式是路由懒加载,后面有解释
component: () => import(/* webp ackChunkName: “about” */ ‘…/views/About.vue’)
}
]
我们前面说过改变路径的方式有两种:
-
URL 的 hash
-
HTML5的history
默认情况下,路径的改变使用的 URL 的hash,如果希望使用 HTML5 的 history 模式,进行如下配置即可:
const router = new VueRouter({ routes, mode: ‘history’})
-
在前面的
<router-link>
中,我们只是使用了一个属性:to
,用于指定跳转的路径 -
<router-link>
还有一些其他属性 -
tag
: tag可以指定<router-link>
之后渲染成什么组件,比如下面的代码会被渲染成一个<li>
元素,而不是<a>
-
replace
: replace 不会留下 history 记录,所以指定 replace 的情况下,后退键返回不能返回到上一个页面中 -
active-class
:当<router-link>
对应的路由匹配成功时,会自动给当前元素设置一个router-link-active
的 class,设置 active-class 可以修改默认的名称(一般不需要改) -
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类
-
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可
Home
About
有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了,也就是编程式导航。
例如,我们需要点击按钮然后进行跳转
<button @click=“homeClick”>首页
<button @click=“aboutClick”>关于
===================================================================================
路由重定向 指的是:用户在访问 地址 A 的时候, 强制用户跳转 到地址 C ,从而展示特定的组件页面。
通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:
const router = new VueRouter({
// 在 routes 数组中,声明路由的匹配规则
routes: [
// 当用户访问 / 的时候,通过 redirect 属性跳转到 /home 对应的路由规则
{
path: ‘/’,
redirect: ‘/home’
}
]
})
-
首先, 我们知道路由中通常会定义很多不同的页面.
-
这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.
-
但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大
-
如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
-
如何避免这种情况呢? 使用路由懒加载就可以了
路由懒加载做了什么?
-
p路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
-
只有在这个路由被访问到的时候, 才加载对应的组件
3.2.1、懒加载的方式
在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home = () => import(‘…/components/Home.vue’)
例如:
// 配置路由相关的信息
import VueRouter from ‘vue-router’
import Vue from ‘vue’
// 原始路由加载
// import Home from ‘…/components/Home’
// 路由懒加载(推荐)
const Home = () => imports(‘…/components/Home’)
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
const routes = [ // 在 routes 数组中,声明路由的匹配规则
{
// path 表示要匹配的 hash 地址,component 表示要展示的路由组件
path: ‘/’,
name: ‘Home’,
component: Home
},
{
path: ‘/about’,
name: ‘About’,
component: () => import(‘…/views/About.vue’)
}
]
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes,
mode: ‘history’,
linkActiveClass: ‘active’
})
// 3.将router对象传入到Vue实例
export default router
动态路由指的是:把 Hash 地址中可变的部分 定义为参数项 ,从而提高路由规则的复用性 。
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径
-
/user/aaaa 或 /user/id
-
除了有前面的 /user 之外,后面还跟上了用户的 ID
-
这种 path 和 Component 的匹配关系,我们称之为动态路由(也是路由传递数据的一种方式)
我们在 src/router/index.js 中配置路由
- 使用英文的冒号 (: ) 来定义路由的参数项
{
path: ‘/user/:id’,
component: User
}
在 User.vue 组件中,可以获取到 id 的值,从而展示对应的用户详情
User组件 ------- {{this.$route.params.id}}
我们也可以在主组件 App.vue 中获取到路由参数
用户
为了简化路由参数的获取形式,vue-router 允许在 路由规则中开启 props 传参 。
- 我们在 src/router/index.js 中配置路由
定义路由规则时,声明 props: true
选项
{
path: ‘/user/:id’,
component: User,
props: true
}
- 在 User.vue 组件中,可以获取到 id 的值,从而展示对应的用户详情
User组件 ------- {{id}}
- 在主组件 App.vue 中也可以获取到路由参数
用户
传递参数主要有两种类型: params 和 query
3.5.1、params的类型
-
配置路由格式:
/router/:id
-
传递的方式: 在path后面跟上对应的值
-
传递后形成的路径: /router/123, /router/abc
3.5.2、query的类型
-
配置路由格式: /router, 也就是普通配置
-
传递的方式: 对象中使用query的key作为传递方式
-
传递后形成的路径: /router?id=123, /router?id=abc
例如我们在 App.vue 里面向其他路由 ‘/profile’ 传递对象参数
<router-link :to ="{
path:‘/profile’,
query:{name: ‘why’,age: 18,height:1.88}}">
在 Profile.vue 组件里面也可以取到传递过来的参数
我是 Profile 组件
{{this.$route.query}}
{{this.$route.query.name}}
{{this.$route.query.age}}
{{this.$route.query.height}}
嵌套路由是一个很常见的功能,比如在home页面中, 我们希望通过 /home/news 和 /home/message 访问一些内容,
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件
实现嵌套路由有两个步骤:
-
创建对应的子组件, 并且在路由映射中配置对应的子路由.,使用
children
属性声明子路由规则 -
在组件内部使用
<router-view>
标签.
我们创建好 HomeNews.vue 和 HomeMessage.vue 后,在 src/router/index.js 中配置路由映射
// 配置路由相关的信息
import VueRouter from ‘vue-router’
import Vue from ‘vue’
// 路由懒加载(推荐)
const Home = () => imports(‘…/components/Home’)
const HomeNews = () => imports(‘…/components/HomeNews’)
const HomeMessage = () => imports(‘…/components/HomeMessage’)
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
const routes = [
{
// Home 页面的路由规则(父级路由规则)
path: ‘/home’,
name: ‘Home’,
component: Home,
// 通过 children 属性,嵌套声明子级路由规则
children: [
{
// 默认路径
path: ‘’,
redirect: ‘news’
},
{
path: ‘news’,
component: HomeNews
},
{
path: ‘messages’,
component: HomeMessage
}
]
},
]
const router = new VueRouter({
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
Home’)
const HomeNews = () => imports(‘…/components/HomeNews’)
const HomeMessage = () => imports(‘…/components/HomeMessage’)
// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)
const routes = [
{
// Home 页面的路由规则(父级路由规则)
path: ‘/home’,
name: ‘Home’,
component: Home,
// 通过 children 属性,嵌套声明子级路由规则
children: [
{
// 默认路径
path: ‘’,
redirect: ‘news’
},
{
path: ‘news’,
component: HomeNews
},
{
path: ‘messages’,
component: HomeMessage
}
]
},
]
const router = new VueRouter({
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-45N02chi-1715012231133)]
[外链图片转存中…(img-RRkUD9VM-1715012231134)]
[外链图片转存中…(img-bkeQqRr2-1715012231134)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!