timg.jpg
前言
可能在vue里，都认为vue-router比较简单，不需要太多关注（我之前也是，哈哈...）; 但是认真的过一遍文档，受益匪浅。提炼出自己需要注意的东西，解决了一致困扰自己的问题;
vue-router
- $route 和 $router的区别？
$router 是router（路由）实例；$route 是一个对象，可以访问path，name等属性。还有就是route object 是只读的，不可变的，所以我们不能更改其中的值。
- router.replace 和 router.push 的区别？
前一个不会记录路由到history栈里，后一个会，回退的时候，根据记录进行回退。还有router.go(n)（n为number类型，可以负） 来实现页面前进和回退。这里也可以使用history.go 或者history.forward() (前进，相当于history.go(1)) 和history.back() (后退，相当于history.go(-1));
//当我们嵌套的路由比较深的时候，可以使用这个来解决。
let len = history.length;
history.go(-(len-1));
// 首页 history.length 长度为 1；
- 在router-link怎么实现router.push,router.replace,router.append的效果？
上面介绍了push和replace的区别，append是在前一个路由上在添加的子路由，就像路由里的children,如从a页面（/a）跳转到b页面(路由/b),如果添加append属性，那么b就是a的子路由，访问路径为/a/b;
//append 和 replace 默认为false，（push默认true，记录路由）如果想设置不记录路由，或者添加子路由，改变其boolean值即可，如下就是设置其值为true的方式；
<router-link to='/a' replace></router-link>
<router-link to='/a' append></router-link>
- $route.params 和 $roue.query 的区别？ （还有一个$route.hash）
// 1.显示的方式不一样
// $route.params url显示 /user/123
// $routr.query url显示 /user/id=123
// 在router-link中显示形态
<router-link :to={path:'/a', query:{id:123}}></router-link>
<router-link :to={name:'a', params:{id:123}}></router-link>
// 如果使用 params 就不能写 path 路径（写了也访问不到），可以配置name来匹配路径
-
我们在匹配动态路由的时候，也可以匹配多个参数/msg/:id:orderId,参数是一一对应的，在写对应的路由时，要注意。
-
懒加载，实现的原理是vue的异步组件和webpack代码分割功能，webpack是根据import来进行代码分割的，vue的组件是异步加载的，我们可以import组件，来实现代码的分割，同时实现异步加载。（这里有两种加载方式，实现的结果是一致的，唯一的区别，一个可以设置打包文件的包名，一个是webpack自动添加的）
import Vue from 'vue'
import Router from 'router'
Vue.use(Router)
// require();
const a = reslove => {
require(['../components/index.vue'],reslove)
}
// 文件名webpack自动生成
export default new Router({
routes: [
{
path: '/',
component: a
}
]
})
// require.ensure();
const r = a => {
require.ensure([],() => a(require('../components/index.vue')),'index')
}
// 这个组件会打包成为一个名为index.js的文件。
export default new Router({
routes: [
{
path: '/',
component: a
}
]
})
一般加载方式为这两种，如果对require和require.ensure不熟悉的话，可以参考这里;
- 对路由导航信息流程(参考vuejs-router官网)
触发路由 --> 离开当前组件，进入下一个组件前(组件失活状态)
--> 可以调用全局守卫beforeEach守卫（可以在这个守卫里我们开启一个新页面的loading,注意，这个守卫是在全局调用的）
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
const Router = new Router({
routes: [
{
path: '/',
name: 'index',
component: index
}
]
})
//beforeEach
Router.beforeEach(to,from,next){
// do something
next()
}
//afterEach
Router.afterEach(to,from,next){
// do something
next()
}
export default Router
参考 vux 使用该守卫实现页面加载前loading
--> 如果在重用的组件里调用，如果有beforeRouteUpdate这个守卫，就会调用（2.2+ 以上版本，比如我们列表页根据id跳转到详情页，详情页组件的复用；注意，这个是在组件里调用）
export default {
data(){
return {}
},
beforeRouteUpdate(to,form,next){
// do something
// 能获取组件实例 ‘this’
next();
}
}
-->如果路由里配置beforeEnter，会先调用这个守卫的；
{
path:'/a',
component:require('../components/a'),
beforeEnter:(to,from,next) {
next();
//next() 一定要调用（该方法可以改变跳转和回退的路径，非常有用的）
}
}
该导航守卫能解决回退到指定页面的问题，具体查看这里;
--> 解析异步路由组件(解析目标组件)
--> 如果组件激活，进入组件，此时beforeRouteEnter() 守卫被调用；（他也是在组件内，但并不能访问组件实例，需要回调给next来访问组件，在导航确认后执行回调，组件实例为入参。只要该守卫有回调，其他组件内的守卫是没有回调的）
export default {
data(){
return {}
},
beforeRouteEnter(to,form,next){
// do something
// 能获取组件实例 ‘this’
next();
}
}
--> 调用全局的 beforeResolve 守卫 (2.5+),和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。（这是2.5+ 新增的）
--> 导航被确认（这个时候的$route对象的属性是不可变的了）
--> 调用全局的 afterEach 钩子
--> 触发DOM更新，目标路径页面渲染
--> 该组件实例已创建，可以调用beforeRouteEnter 守卫中传给 next 的回调函数
--> beforeRouteLeave 在组件里调用，当离开该组价时调用
- history模式和hash模式
history模式需要history.pushState来支持，这是h5新引入的方法。hash模式这没有这个条件。
网友评论