Vue3 全家桶，从 0 到 1 实战项目，前端敏捷开发

{

path:“/”,

component:()=>import(“…/pages/index.vue”)

}

]

然后在 App.vue 文件内添加 router-view 容器。

此时运行项目的时候就能看到新建的 index.vue 的内容了。

三、vue-router4 结合 composition API 使用

---

3.1、composition API

composition API 中文叫做组合式API，它是 Vue3 特有的，同时 vue3 也能够向下兼容 Options API。

setup 函数就是 composition API 的入口，是处于生命周期钩子函数 beforeCreate 和 created 两个函数之间，所以 setup 中的属性和方法在外部使用时，需要先 return 暴漏出去。

修改 index.vue 组件，采用 composition API 。

3.2、响应式数据

上述的实例中中，如果我们在 template 内，打印 msg 的时候，就会发现响应式失效。

{ { msg }}

是因为在 setup 内地自定义属性不具备响应式能力。vue3 的响应式原理是 通过底层代理 proxy 将数据包装一下，使得具有响应式。vue3 的响应式原理详情可查看《vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能？》——vue3 的 setup 如何实现响应式功能？》")

此处 msg 是一个基础数据类型，可以通过 ref 包装下数据，ref 使用之前需要从 vue 中先引入。修改 script 中的代码

此时在 input 或在 setup 内改变 msg 的值,如：

此时无论如何修改 msg 都会保证实时响应。

与 ref 类似的还有 reactive 。ref 是让基础数据类型具有响应式，reactive 是让引用数据类型具有响应式。

3.3、组合式内如何使用路由？

一个项目中，导航选项卡是很常见的，在 App.vue 文件内，加入两个导航：

首页

我的

如