vue 3.0 項目搭建移動端 (二) Vue-router： router-link 與 router-view keep-alive

Vue-router

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: '商品管理'
 }
}
 

 例子

APP.vue

<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>
        //命名路由，只匹配name=tabbar的路由，並且用v-if判斷是否展示，算是v-router配合下最原始的匹配
        <router-view name="tabbar" v-if="this.tab ==='tabbar'"></router-view>
    </div>
</template>
<script>
import locationDistance from '@/mixin/location-distance';
import {getOtherQuery} from '@/utils'

export default {
    mixins: [locationDistance],
    data() {
        return {
            tab: ''
        }
    },
    methods: {},
    mounted() {
        const script = document.createElement('script');
        script.src = 'https://**********';//網絡文件
        script.language = 'JavaScript';
        document.body.appendChild(script);
    },
    watch: {
        $route(to, from) {
            if (to.name === 'home') {

                let OtherQuery = getOtherQuery(this.$route.query) //$route.query接參,參數來源於 this.$router.push({ path:'/index',query:{userId:1} }) this.$router.push({path: '/home', query: Object.assign({tab: 'tabbar'}, OtherQuery)})
            }
            if (to.query && to.query.tab) {
                this.tab = to.query.tab
            } else {
                this.tab = ''
            }
            if (window._czc) {
                let location = window.location;//路由變化
                let contentUrl = location.hash;//自定義當前url，可帶上路由以此區分每個頁面
                let refererUrl = '/';
                window._czc.push(["_setAutoPageview", false]);
                window._czc.push(["_trackPageview", contentUrl, refererUrl])

            }
        }
    }
}
</script>