onMounted函数及点击跳转

onMounted：DOM挂载完毕

其他生命周期函数如下

 

 

onMounted使用前在Vue中需要提前声明如：

import { defineComponent, reactive, ref, onMounted } from 'vue';

 

使用：

onMounted(() => {

       requestNavigation({

            }).then((res) => {

              console.log('0000', res)

              area.value = res.data;

            }).catch((err) => {

              console.log('err', err)

            })

    })

 

 

2、点击跳转

1、导入路由组件

import {useRoute, useRouter} from 'vue-router'

 

2、在Vue3.0中setup()函数中需要定义

const routes = useRoute()

const routers = useRouter()

 

并return{

routes,

routers

}

 

3、在路由文件中添加

export const PortalRoute: AppRouteRecordRaw = {

  path: '/portal',

  name: 'Portal',

  component: () => import('/@/views/sys/main/loginPortal.vue'),

  meta: {

    title: t('routes.basic.portal'),

    ignoreAuth: true

  },

};

 

4、DOM定义一个单击事件

<div class="area-box">

      <div class="s-area-box" >

        <div class="s-area" v-for="(i,index) in area" @click="onClickNav(i)">

          <!-- <a-button ref="www.hao123.com">{{i.shortName}}</a-button> -->

          {{i.shortName}}

        </div>

      </div>

    </div>

 

5、js跳转

function onClickNav(data) {

      console.log('data', data, routers)

      routers.push({

        path: 'portal',

        query: {

          type: data.domain

        }

      })

    }