vue3实践---路由router

Posted 2023-04-27

参考技术A 具体的项目创建这里就不说了，直接参考官方文档就够了： 安装 | Vue.js (vuejs.org)
不得不说，vite 是真滴强，速度比起webpack 快了好几倍，用过就真的回不去了。本次的实践是实现一个常见的后台管理系统，细节会尽量跳过，只集中在路由上面去展示和记录。

首先整个页面就是一级路由，通常会有登录页，报错页，主页之间的切换，这里也是做路由切换动画的主要地方。当顶部有导航菜单的时候红色框就是二级路由，以此类推绿色框就是三级路由。

创建好vue3项目的第一步就是安装vue-router ,因为vite 默认并没有安装的。参考官网： 安装 | Vue Router (vuejs.org)
然后在src 目录下创建router目录，并添加2个文件index.js,routes.js.

这里就要画重点了。因为vue3的过度动画transition组件跟vue2比变化还是比较大的。主要是以下的2各方面：
1.transition组件在vue 2 中是作为父级包裹路由router-view 的，到了vue3就反过来了

2.动画类名发生了一点变化，开始和结束变成了from 和 to ，所以不能直接吧vue2的过度动画复制过来，需要做一些改动。

使用 Vue Router 响应参数更改的最佳实践

【中文标题】使用 Vue Router 响应参数更改的最佳实践

【英文标题】：Best Practice for Reacting to Params Changes with Vue Router

【发布时间】：2017-03-17 05:33:42

【问题描述】：

当使用带有 /foo/:val 之类的路由的 Vue 路由器时，您必须向 react for parameter changes 添加一个观察者。这会导致在 URL 中有参数的所有视图中出现一些令人讨厌的重复代码。

这可能类似于以下示例：

export default 
    // [...]
    created() 
        doSomething.call(this);
    ,
    watch: 
        '$route' () 
            doSomething.call(this);
        
    ,


function doSomething() 
    // e.g. request API, assign view properties, ...

还有其他方法可以克服吗？ created 和 $route 更改的处理程序可以组合吗？是否可以禁用组件的重用，以便根本不需要观察者？我正在使用 Vue 2，但这对 Vue 1 来说可能也很有趣。

【问题讨论】：

嗯。 v1 路由器有一个 canReuse 但我在 v2 中没有看到。很有趣。

@ceejayoz 你是对的，它在那里但是has been removed。

好吧，？？？？！为这个问题加注星标。

【参考方案1】：

感谢GitHub issue，我刚刚找到的一个可能答案如下。

可以使用key attribute（也用于v-for）让Vue 跟踪视图中的更改。为此，您必须将属性添加到 router-view 元素：

<router-view :key="$route.fullPath"></router-view>

将此添加到视图后，您无需再观看$route。相反，Vue.js 将创建一个全新的组件实例并调用created 回调。

但是，这是一个全有或全无的解决方案。它似乎在我目前正在开发的小型应用程序上运行良好。但它可能会影响另一个应用程序的性能。如果您真的想仅对某些路由禁用视图的重用，您可以查看设置key 的值based on the route。但我不太喜欢这种方法。

【讨论】：

这行得通，谢谢，但是我在这些路由组件中有子组件，它们没有得到保留。我看到每次我在两个单独安装且仅安装一次的路由组件之间切换时，它们都会发出已安装的事件。有没有办法让他们的子组件也保持活力？ 将所有孩子折叠成一个，即使我使用钥匙。

谢谢，它仍然可以与 Vue3 完美配合