vue篇之路由详解

阅读原文时间：2023年07月14日阅读：1

一、vue路由传参的几种方式

父组件：<router-link :to="`/path/${id}`"><router-link>

//获取参数
子组件：this.$route.params.id

（1）冒号的的形式传递传参（页面刷新数据不会丢失）

父组件：

this.$router.push({
    path: `/describe/${id}`
})

对应路由配置如下：

{
    path: '/describe/:id',
    name: 'Describe',
    component: Describe
}
# path中添加/:id来对应 $router.push 中path携带的参数

子组件：获取参数

this.$route.params.id

（2）params传参

父组件：通过路由属性中的name来确定匹配的路由，通过params来传递参数

this.$router.push({
    name: 'Describe',
    params: {
        id: id
    }
})

对应路由配置如下：

{
    path: '/describe',
    name: 'Describe',
    component: Describe
}
# 这里可以添加:/id 也可以不添加，添加数据会在url后面显示，页面刷新数据不会丢失，不添加数据就不会显示，页面刷新数据会丢失。不过重要的参数本就不应该显示在地址栏上面！用params传参不是好的实践，不安全！

子组件：获取参数

this.$route.params.id

（3）query传参也就是？形式（路径会显示传递的参数，刷新页面数据不会丢失）

父组件：使用path来匹配路由，然后通过query来传递参数

this.$router.push({
    path: "/describe", //路由配置中的name
    query:{
        id: id
    }
});

对应路由配置如下：

{
    path: '/describe',
    name: 'Describe',
    component: Describe
}
# 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用query来携带参数了。

子组件：获取参数

this.$route.query.id


## important!!! ##
在子组件中 获取参数的时候是$route.params 而不是 $router;
和name配对的是params，和path配对的是query

二、Vue-router 中hash路由和history路由

hash：即地址栏 URL 中的 # 符号。比如这个 URL：www.abc.com/#/hello，hash 的值为 #/hello。

特点： hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

当页面中的 hash 发生变化时，会触发hashchange事件，因此我们可以监听这个事件，来判断路由是否发生了变化。

window.addEventListener(
    'hashchange',
    function (event) {
        const oldURL = event.oldURL; // 上一个URL
        const newURL = event.newURL; // 当前的URL
        console.log(newURL, oldURL);
    },
    false
);

history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

特点：监听 url 中的路径变化，需要客户端和服务端共同的支持。

在 history 路由中，我们一定会使用window.history中的方法，常见的操作有：

back()：后退到上一个路由；
forward()：前进到下一个路由，如果有的话；
go(number)：进入到任意一个路由，正数为前进，负数为后退；
pushState(obj, title, url)：前进到指定的 URL，不刷新页面；
replaceState(obj, title, url)：用 url 替换当前的路由，不刷新页面；

调用这几种方式时，都会只是修改了当前页面的 URL，页面的内容没有任何的变化。但前 3 个方法只是路由历史记录的前进或者后退，无法跳转到指定的 URL；而pushState和replaceState可以跳转到指定的 URL。(只修改页面的 URL，而不发送请求的5种方法)

router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像，实际上它们确实是效仿 window.history API

（1）调用 history.pushState() 相比于直接修改 hash，存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
pushState() 可额外设置 title 属性供后续使用。

（2）pushState 和 replaceState 两个方法跟 location.href 和 location.replace 两个方法区别

location.href 和 location.replace 切换时要向服务器发送请求，而 pushState 和 replace 仅修改 url，除非主动发起请求；
仅切换 url 而不发送请求的特性，可以在前端渲染中使用，例如首页是服务端渲染，二级页面采用前端渲染；
可以添加路由切换的动画；
在浏览器中使用类似抖音的这种场景时，用户滑动切换视频时，可以静默修改对应的 URL，当用户刷新页面时，还能停留在当前视频。

（1） hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

（2）history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id 如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

（3）结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。

三、Vue 路由导航守卫

（1）全局前置守卫 router.beforeEach

router.beforeEach((to,from,next)=>{
    // ...
})
回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

举例说明：

router.beforeEach((to,from,next)=>{
    if(to.path == '/login' || to.path == '/register'){
        next();
    }else{
        alert('您还没有登录，请先登录');
        next('/login');
    }
})
// 判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。
// 这样就可实现，用户在未登录状态下，展示的一直是登录界面。

（2）全局解析守卫 router.beforeResolve

和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

（3）全局后置钩子 router.afterEach

router.afterEach((to,from)=>{
    // ...
})
只有两个参数，to：进入到哪个路由去，from：从哪个路由离开

举例说明：

router.afterEach((to,from)=>{
    alert("after each");
})
// 每次切换路由时，都会弹出alert，点击确定后，展示当前页面。

可以在路由配置上直接定义 beforeEnter 守卫，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
                // ...
            }
        }
    ]
})

（1）beforeRouteEnter

beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 'this'
    // 因为当守卫执行前，组件实例还没被创建
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
    next(vm => {
        // 通过 'vm' 访问组件实例
    })
}

举例

<script>
    export default {
        data(){
            return{
                name:"Arya"
            }
        },
        beforeRouteEnter:(to,from,next)=>{
           console.log("hello " + this.name); // hello undefined
        }
    }
</script>


<script>
    export default {
        data(){
            return{
                name:"Arya"
            }
        },
        beforeRouteEnter:(to,from,next)=>{
            next(vm=>{
                 console.log("hello " + vm.name); // hello Arya
            })
        }
    }
</script>


## 注意 ## beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

（2）beforeRouteUpdate

beforeRouteUpdate(to, from, next) {
    // just use `this`
    this.name = to.params.name
    next()
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 'this'
}

（3）beforeRouteLeave

beforeRouteLeave(to, from, next) {
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next() // 确认离开
    } else {
        next(false) //取消执行
    }
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 'this'
}

点击其他组件时，判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面。

（1）导航被触发。

（2）在失活的组件里调用 beforeRouteLeave 守卫。

（3）调用全局的 beforeEach 守卫。

（4）在重用的组件里调用 beforeRouteUpdate 守卫。

（5）在路由配置里调用 beforeEnter。

（6）解析异步路由组件。

（7）在被激活的组件里调用 beforeRouteEnter。

（8）调用全局的 beforeResolve 守卫。

（9）导航被确认。

（10）调用全局的 afterEach 钩子。

（11）触发 DOM 更新（mounted）。

（12）调用 beforeRouteEnter 守卫中传给 next的回调函数，创建好的组件实例会作为回调函数的参数传入。

四、不知道的 keep-alive

在开发Vue项目的时候，大部分组件是没必要多次渲染的，所以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。

和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

缓存动态组件：

< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，此种方式并无太大的实用意义。

<!-- 基本 -->
<keep-alive>
    <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
    <comp-a v-if="a > 1"></comp-a>
    <comp-b v-else></comp-b>
</keep-alive>

缓存路由组件：

使用 keep-alive 可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive 大多数使用场景就是这种。

<keep-alive>
    <router-view></router-view>
</keep-alive>

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated。

activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用。

activated调用时机：

第一次进入缓存路由/组件，在mounted后面，beforeRouteEnter守卫传给 next 的回调函数之前调用：

beforeMount => 如果你是从别的路由/组件进来(组件销毁destroyed/或离开缓存deactivated) =>

mounted => activated 进入缓存组件 => 执行 beforeRouteEnter回调

因为组件被缓存了，再次进入缓存路由/组件时，不会触发这些钩子：

beforeCreate created beforeMount mounted 都不会触发。

所以之后的调用时机是：

组件销毁destroyed/或离开缓存deactivated => activated 进入当前缓存组件 => 执行 beforeRouteEnter回调

// 组件缓存或销毁，嵌套组件的销毁和缓存也在这里触发

deactivated：组件被停用(离开路由)时调用

使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。如果缓存了组件，要在组件销毁的的时候做一些事情，可以放在这个钩子里。

离开了路由，会依次触发:

> 组件内的离开当前路由钩子 beforeRouteLeave => 路由前置守卫 beforeEach => 全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)
// 如果离开的组件没有缓存的话 beforeDestroy会替换deactivated
// 如果进入的路由也没有缓存的话  全局后置钩子afterEach=>销毁 destroyed=> beforeCreate等

新增Props
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
    <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
    <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
    <component :is="view"></component>
</keep-alive>

匹配规则：

（1）首先匹配组件的name选项，如果name选项不可用。

（2）则匹配它的局部注册名称。 (父组件 components 选项的键值)

（3）匿名组件，不可匹配。

（4）exclude的优先级大于include

也就是说：当include和exclude同时存在时，exclude生效，include不生效。

<keep-alive include="a,b" exclude="a">
    <!--只有a不被缓存-->
    <router-view></router-view>
</keep-alive>

当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。

max 数字，最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
    <component :is="view"></component>
</keep-alive>

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
beforeEnter: 路由独享守卫
beforeRouteEnter: 路由组件的组件进入路由前钩子。
beforeResolve:路由全局解析守卫
afterEach:路由全局后置钩子
beforeCreate:组件生命周期，不能访问this。
created:组件生命周期，可以访问this，不能访问dom。
beforeMount:组件生命周期
deactivated: 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
mounted:访问/操作dom。
activated:进入缓存组件，进入a的嵌套子组件(如果有的话)。
执行beforeRouteEnter回调函数next。

五、额外补充

ajax请求最好放在created里面，因为此时已经可以访问this了，请求到数据就可以直接放在data里面。（这里也碰到过几次，面试官问：ajax请求应该放在哪个生命周期。）
关于dom的操作要放在mounted里面，在mounted前面访问dom会是undefined。
每次进入/离开组件都要做一些事情，用什么钩子：
不缓存：

进入的时候可以用created和mounted钩子，离开的时候用beforeDestory和destroyed钩子,beforeDestory可以访问this，destroyed不可以访问this。
缓存了组件：

缓存了组件之后，再次进入组件不会触发beforeCreate、created 、beforeMount、 mounted，如果你想每次进入组件都做一些事情的话，你可以放在activated进入缓存组件的钩子中。

同理：离开缓存组件的时候，beforeDestroy和destroyed并不会触发，可以使用deactivated离开缓存组件的钩子来代替。