目录
1 == 和===区别
===:称为等同符,当两边值的类型相同时,直接比较值,若类型不相同,直接返回false;
==: 为等值符 当等号两边的类型相同时,直接比较值是否相等,若不相同,则先转化为类 型相同的值,再进行比较;
2 $router和$route区别?
$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。
**1.$route.path**
字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"。
**2.$route.params**
一个 key/value 对象,包含了 动态片段 和 全匹配片段,
如果没有路由参数,就是一个空对象。
**3.$route.query**
一个 key/value 对象,表示 URL 查询参数。
例如,对于路径 /foo?user=1,则有 $route.query.user == 1,
如果没有查询参数,则是个空对象。
**4.$route.hash**
当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。锚点
**5.$route.fullPath**
完成解析后的 URL,包含查询参数和 hash 的完整路径。
**6.$route.matched**
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
**7.$route.name 当前路径名字**
**8.$route.meta 路由元信息
$router对象是全局路由的实例,是router构造方法的实例。
push
// 字符串
this.$router.push('home')
// 对象
this.$router.push({ path: 'home' })
// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数,变成 /register?plan=123
this.$router.push({ path: 'register', query: { plan: '123' }})
go
// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
replace
//push方法会向 history 栈添加一个新的记录,而replace方法是替换当前的页面,
不会向 history 栈添加一个新的记录
05
// 一般使用replace来做404页面
this.$router.replace('/')
配置路由时path有时候会加 '/' 有时候不加,以'/'开头的会被当作根路径,就不会一直嵌套之前的路径。
3 什么是promise?
在Promise的内部,有一个状态管理器的存在,有三种状态:pending、fulfilled、rejected。
(1) promise 对象初始化状态为 pending。
(2) 当调用resolve(成功),会由pending => fulfilled。 then
(3) 当调用reject(失败),会由pending => rejected。
01示例
getData()
.then(a => getMoreData(a))
.then(b => console.log(b));
- 2 promise 可以实现在多个请求发送完成后 再得到或者处理某个结果
-
构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参,两个形参都是function类型的参数。分别是resolve和reject。 Promise上还有then方法,then 方法就是用来指定Promise 对象的状态改变时确定执行的操作,resolve 时执行第一个函数(onFulfilled),reject时执行第二个函数(onRejected) 当状态变为resolve时便不能再变为reject,反之同理。
注:
是一个异步函数的解决方案,主要是为了解决回调地狱的问题(函数里边调用函数,从而形成多层嵌套,导致代码的可读性和维护性变差);promise本身是一个函数,自身有resolve ,reject ,all,三种方法;原型里边有then(),catch()两种方法
4 什么是嵌套路由?
要将组件渲染到这个嵌套的 router-view
中,我们需要在路由中配置 children
:
const routes = [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功
// UserProfile 将被渲染到 User 的 <router-view> 内部
path: 'profile',
component: UserProfile,
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 将被渲染到 User 的 <router-view> 内部
path: 'posts',
component: UserPosts,
},
],
},
]
重定向和别名
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
// 方法接收目标路由作为参数
// return 重定向的字符串路径/路径对象
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]
路由守卫 是什么
简单来说,导航守卫就是路由跳转前、中、后过程中的一些钩子函数,这个函数能让你操作一些其他的事儿,这就是导航守卫。导航守卫分为:全局的、组件内的、单个路由独享三种
1.1 全局的
指路由实例上直接操作的钩子函数,他的特点是所有配置路由的组件都会触发
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
全局路由的钩子函数包括
- beforeEach
在路由跳转前触发,参数包括to,from,next(参数会单独介绍)三个,这个钩子作用主要是用于登录验证 - beforeResolve(2.5+)
这个钩子和beforeEach类似,也是路由跳转前触发,参数也是to,from,next三个,与beforeEach的区别参考官网。 - afterEach
- 是在路由跳转完成后触发,参数包括to,from,它发生在beforeEach和beforeResolve之后,beforeRouteEnter(组件内守卫)之前。
-
路由守卫回调参数
-
to:目标路由对象;
-
from:即将要离开的路由对象;
-
next:他是最重要的一个参数,他相当于佛珠的线,把一个一个珠子逐个串起来。
Vue的路由实现
Vue的路由实现,hash模式 和 history模式
是什么?
在浏览器链接中符号“#”后面的字符称之为hash,用window.location.hash读取;
特点
hash虽然在URL中,但不被包括在HTTP请求中;
仅用来指导浏览器动作,对服务端安全无害,
hash不会重新加载页面。
是什么?
history模式是采用HTML5的新特性;且提供了两个新方法:pushState()、replaceState() 可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
特点
history 模式下,前端的 URL 被包括在HTTP请求中,如 http://www.xxx.com/items/id。
如果后端有对请求接口的地址进行管理,同时缺少对其相应路由的处理的话,那就将返回 404 错误。(也就是说,后台处理某个接口只能针对某个页面链接请求,其它页面请求该接口将无法请求通)
路由之间跳转方式
- 1.1、直接修改地址栏中的路由地址
- 1.2、通过router-link实现跳
<router-link to="/myRegister">注册</router-link>
通过导航钩子中的next方法修改跳转地址
beforeRouteEnter (to, from, next) {
next('/login')
}
动态路由配制 以及 动态参数的获取
1.1 动态路由配制
在router目录下的index.js文件中,对path属性中需要动态配制地地方前面加上:
routes: [
{
path: '/foo/:id',
component: Foo
}
]
动态参数的获取
this.$route.params //params对象是所有传递过来的参数
router-link 路由传递参数
1 query传参
//query传参
<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>
//获取参数
this.$route.query
2.params传参
//动态路由 router/index.js
routes: [
{
path: '/test/:id',
component: Foo
}
]
// id 是路由配制的动态参数
<router-link :to="'/test/'+id">跳转</router-link>
//获取方法
this.$route.params