1新建navigationBarvue 内容如下2appvue3新建几个vue文件，用来放内容4新建loginvue。

而底部导航栏是直接在Appvue根组件中使用的，登陆页也是通过路由显示在根组件上的，所以登录页没法传值直接控制底部导航栏的显示那么我能通过什么解决了，想到了用vuex状态管理，开工我这边把mutations，actions，getters。

我们可以使用 navbar 类来创建一个标准的导航栏，后面紧跟 navbarexpandxllgmdsm 类来创建响应式的导航栏 大屏幕水平铺开，小屏幕垂直堆叠导航栏上的选项可以使用 元素并添加 class= navbarnav 类。

解决方法有两种第一可以通过存缓存来获取状态，第二可以监听路由本文主要针对第二种方法详细解答一下小伙伴们首先可能想到的是watch监听$route，但是在这我不推荐使用watch，因为watch如果用户刷新页面的情况下，会兼听不。

一打开Dreamweaver，点击 文件新建 菜单，创建一个HTML文件，输入网站导航栏文字，并选中输入的文字，在下面的属性栏链接处加一个空链接然后保存该网页文件 二点击 窗口行为 菜单，打开行为面板。

Vue3 中响应式核心方法就是 reactive 和 effect ， 其中 reactive 方法是负责将数据变成响应式， effect 方法的作用是根据数据变化去更新视图或调用函数，与 react 中的 useEffect 有点类似~其大概用法如下。

1在Vue组件中，找到导航栏和轮播图对应的区域，添加CSS样式，确定轮播图的背景色或者图片，可以使用CSS的backgroundcolor或backgroundimage属性进行设置2将导航栏的背景色或者透明度设置为与轮播图相同或者相似的颜色或。

视图更新原理 其原理就是vue的响应式更新dom的原理，m = v m是数据，也就是在vuerouter install时在根组件root vue component添加了_route属性，在匹配到对应路由后更新了_route属性值，继而触发了该属性值的。

Vue通过设定对象属性的 settergetter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个 观察者Watcher ，在数据变更的时候通知 订阅者Dep 更新视图核心APIobserver 数据劫持 劫持对象的。

因此接下去我们执行以下4个步骤，实现数据的双向绑定深入响应式原理 剖析Vue原理实现双向绑定MVVM 响应式系统的基本原理js JavaScript实现MVVM之我就是想监测一个普通对象的变化。

vue的响应式数据原理是vue的核心特性之一当我们在vue中修改数据时，页面会自动响应并更新相应的部分，这是由vue的响应式数据原理实现的vue通过使用ObjectdefineProperty方法来实现对数据的监听，当数据发生变化时，vue会自动。

vue2响应式原理由 Observer 类， Dep 类和 Watcher 类互相调用实现， Observer 类是把一个普通的object类变成每一层都能相应的类， Dep 类的作用是添加，移除，通知和收集订阅者， Watcher 类是订阅者，主要功能是把当。

Vuejs 里面有一个功能插件就是有关实现是响应式的 模型只是普通对象，修改它则更新视图这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题多去学习vue里面的功能插件实现效果的功能比较。

1方法一 在mockroleroutesjs添加新的页面，因为我重新配置了路由的js，所以需要到这样更改2方法二在routerindexjs，将路由写到外面。

vue2中ObjectdefineProperty响应式只对对象有效，对数组无效，所以对数组做额外处理我们知道，会改变数组本身的方法只有7个sort， push， pop， slice， splice， shift， unshift，所以可以通过重写这些方法来达到数组响应式 解。