Vue有兩種類型的應(yīng)用SPA和MAP，本文主要介紹的是SPA類型下面的使用方法

SPA (single page application)

單頁面應(yīng)用，即一個web項目就只有一個頁面（即一個HTML文件）

這種類型通常都需要router來進(jìn)行頁面跳轉(zhuǎn). 一開始只需要加載一次js、css的相關(guān)資源。所有內(nèi)容都包含在主頁面，對每一個功能模塊組件化。單頁應(yīng)用跳轉(zhuǎn)，就是切換相關(guān)組件，僅僅刷新局部資源

SPA + 站內(nèi)new Tab

功能：在站內(nèi)以一個新頁面打開跳轉(zhuǎn)的路由

路由配置如下：

        {
            name: "testlog",
            path: '/dworks/log/testlog',
            component: components('SurroundingLog.tsx'),
            //用props可以將跳轉(zhuǎn)鏈接里面的參數(shù)，注入到目標(biāo)組件的props屬性里面
            props: (route)=>{
                return { show:JSON.parse(route.query.show),
                         row: JSON.parse(route.query.row)};
            },
            meta: {title: '日志', roles: ['dev', 'admin'] },
        }

子組件示例如下：

const props = {
    row: {
        type: Object as PropType<ContextQueryParam>,
        default: {}
    },
    show: {
        type: Boolean as PropType<boolean>,
        default: false
    },
    pageType: {
        type: String as PropType<string>
    }
}
const SurroundingLog = defineComponent({
    name: "SurroundingLog",
    props,
    emits: ['update:show'],
    setup(props, ctx) {

    const resetData = () => {
      //業(yè)務(wù)邏輯

    }

    onMounted(()=>{
            //為了避免將 {} 識別成不為空，需要使用下面的判斷方式, 不能用 if(route.query)
          if(Object.keys(route.query).length !== 0){
              resetData()
          }
        })

    
    return {resetData}
    },

    render(){

      return (

      <div>
        {this.$props.row.message}
      </div>

      )
    }

    })
export default SurroundingLog

父組件示例如下：

                    const to=router.resolve({
                        name:"surroundingLog",
                        query:{
                            show: 'true',
                            row: JSON.stringify(variables.rowContextParam),
                        }
                    })
                    window.open(to.href, "_blank");

父組件里面的跳轉(zhuǎn)的時候要注意，需要使用query傳字符串參數(shù)，如果是一個對象參數(shù)，則需要通過JSON的stringify方法將其轉(zhuǎn)為字符串，這是因為這些參數(shù)會被拼接到http的url里面，所以僅支持字符串類型，這就是為什么要在routers路由里面入口前，通過props函數(shù)又將這些字符串參數(shù)轉(zhuǎn)回props屬性真正的類型的原因

        {
            name: "testlog",
            path: '/dworks/log/testlog',
            component: components('SurroundingLog.tsx'),
            //用props可以將跳轉(zhuǎn)鏈接里面的參數(shù)，注入到目標(biāo)組件的props屬性里面
            props: (route)=>{
                return { show:JSON.parse(route.query.show),
                         row: JSON.parse(route.query.row)};
            },
            meta: {title: '日志', roles: ['dev', 'admin'] },
        }

SPA + 站外new Tab

站外Tab，可以使用超鏈接直接跳轉(zhuǎn)，也可以使用router，這里記錄下使用router的方法

  {
    path: '/suggestFeedback',
    name: 'suggestFeedback',
    meta: { icon:'md-headset', title: '反饋',roles:[]},
    beforeEnter(to, from, next) {
      window.open("https://www.baidu.com", '_blank')
      window.location.replace("/product/list")
    }
  }

MPA (multi page application)

多頁面應(yīng)用，指有多個獨立頁面的應(yīng)用（多個html頁面），每個頁面必須重復(fù)加載js、css等相關(guān)資源。多頁應(yīng)用跳轉(zhuǎn)，需要整頁資源刷新。項目是由多個完整的頁面組成。多頁面跳轉(zhuǎn)刷新所有資源，每個公共資源(js、css等)需選擇性重新加載。文章來源地址http://www.zghlxwxcb.cn/news/detail-491629.html

到了這里，關(guān)于vue3 route跳轉(zhuǎn)的new tab兩種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！