踩坑：vue3路由跳转，数组对象重新赋值

最近学习Vue3的时候，利用业余时间做了一个简单的ToDoList来进行练习，效果如下：

但是再完成这个小demo的时候遇到了一点常见的坑，所以分享出来，希望给刚刚学习vue3的小伙伴一点帮助

1.路由跳转

正常的路由跳转是需要进行以下几步的
第一步： 引入 useRouter

import { useRouter } from 'vue-router'

第二步： 实例化路由方法

const router = useRouter()

第三步： 使用跳转

 router.push('/Login') //无参数
 router.push({ path: '/Login', query: { id: 1 } }) //有参数

踩坑点： 但是完成了之后，打印出来router，显示router未定义，是undefind

原因： 将第二步的router在局部作用域中执行了，因为不知名原因，router要在全局来进行赋值
代码如下：

    setup () {
        const title = ref('Hello Vue！')
        const router = useRouter() //router应该在此处赋值，而不能再goLogin方法里赋值
        function goLogin () {
            // const router = useRouter()
            router.push({ path: '/Login', query: { id: 1 } })
        }
        return { title, goLogin }
    },

2.数组二次赋值

**踩坑点：**清空数组，然后再重新给数组赋值的时候，发现数组变化了页面没有响应

代码如下：

 underwayList = [];
 derwayList = [];

错误点1：重新赋值之后两个数组已经不再是响应数据了，因为没有进行 reactive 包裹起来

修正后代码如下：

underwayList = reactive([]);
derwayList = reactive([]);

错误点2：虽然重新代理了，但是这个数组已经不是页面上的数组，也就不是setup返回出去的那个，通俗来说就是你大爷已经不是你大爷了

正确代码如下：

//方案一：
underwayList.splice(0, underwayList.length);
derwayList.splice(0, derwayList.length);

//方案二：
underwayList.length = 0;
derwayList.length = 0;

两种方法都行，原理是不改变数组的内存地址的情况下来对数组进行一个清空

以上就是个人踩的一点小坑，希望对你有帮助