vue 3.0 项目搭建移动端 (二) router-link 与 router-view keep-alive

1 router-link

<router-link :to="{ path: '/hello', component: HelloWorld }">hello</router-link>
<router-link :to="{ path: '/user/useradd' }">user</router-link>

以上是两种写法，根据参数还会有更多中写法。

经过测试：（1）有component参数时优先router-link中配置的component，没有时从js中配置取

　　　　　（2）path参数至关重要，灵活所在，/user/useradd 实际匹配了两个组件，分别是user和useradd

k    { path: '/user', component:user,
      children:[
        {path:'/user/useradd', component:useradd},
        {path:'/user/userdelete', component:userdelete}
      ]
    }

2 router-view

<router-view> 是用来渲染通过路由映射过来的组件，当路径更改时，<router-view> 中的内容也会发生更改

<router-link :to="{ path: '/hello', component: HelloWorld }">hello</router-link>
  <router-link :to="{ path: '/user/useradd' }">user</router-link>
  <router-view/>

当前看主要应用于单页面中，与router-link配合，渲染router-link 映射过来的组件。

router-link 粗俗的可以理解为H5中的a标签，用来跳转对应path中的路径，跳转路由用的
$route.meta.keepAlive 

meta: { keepAlive: true }  通过keepAlive确定是否保留 router-view

<template>
    <div id="app" style="height: 100%;">
        <keep-alive>
            <router-view class="view-router" v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view class="view-router" v-if="!$route.meta.keepAlive"></router-view>
        <router-view name="tabbar" v-if="this.tab ==='tabbar'"></router-view>
    </div>
</template>

keep-alive的生命周期

• 初次进入时：created > mounted > activated；退出后触发 deactivated
• 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

项目实践

1.更改App.vue

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

2.在路由中设置keepAlive

{
  path: 'list',
  name: 'itemList', // 商品管理
  component (resolve) {
    require(['@/pages/item/list'], resolve)
 },
 meta: {
  keepAlive: true,
  title: '商品管理'
 }
}