页面导航(nav)一直都是项目开发的诟病，虽然交互逻辑相对于其他部分更为简单，但是实现起来却不那么容易就能够搞定。
这个导航逻辑要实现以下几个目的：

1. 点击导航连接更改导航的指示器(active状态或指标)
2. 在router-view中的页面里点击链接更改路由页面地址的同时也要更改对应的导航指示器(active状态或指标)
3. 在任何路由页面地址的url刷新或进入页面即更改导航的指示器(active状态或指标)

基本构建结构：

1. app.vue
   app.vue是整个项目的根，其包括 header或nav; router-view; footer;
2. router-view(page，下文将用page代替)
   page是app.vue的子集
3. header或nav(下文中将用nav代替)
   nav也是app.vue的子集
4. footer或其他组件
   同样是app.vue的子集

注：page, nav, footer等其他组件都是app.vue的子集， 他们都在app.vue里面

首先搞定nav正常的交互逻辑，即点击nav，指标(active状态)给到相对应的nav项。
这个很容易解决，正常开发即可。我们主要是要讲一讲目的2和目的3(文章开头中提到的)
nav:

• 引用并添加watchEffact和defineProps方法，监听props->current(暂命名current)的变化
• watchEffact监听到current的变化后，赋值或作为nav的active状态判断条件，从而改变nav的active状态
• 额外在props里创建一个接受current的变量

router-view或page定义一个props.nav2方法，用于发送上文中提到的current变量，这个nav2方法可以在router-view中的所有page里使用。

至此就可以实现文章开头的那几个目的了，如果看不懂，下面是手稿和代码段：

nav.vue

const props = defineProps({
    current: String
})    
watchEffect(() => {
    navName.value = props.current
})

page.vue

const props = defineProps({
    nav2: Function
})
props.nav2('goods?id=' + cid)

app.vue

<navApp :data="pageData" :current="nav_current"></navApp>
<router-view :nav2="e => { nav_current = e }"></router-view>
<footApp :data="pageData"></footApp>

手稿截图：