vue3 route跳转的new tab两种方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 route跳转的new tab两种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue有两种类型的应用SPA和MAP，本文主要介绍的是SPA类型下面的使用方法

SPA (single page application)

单页面应用，即一个web项目就只有一个页面（即一个HTML文件）

这种类型通常都需要router来进行页面跳转. 一开始只需要加载一次js、css的相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源

SPA + 站内new Tab

功能：在站内以一个新页面打开跳转的路由

路由配置如下：

        {
            name: "testlog",
            path: '/dworks/log/testlog',
            component: components('SurroundingLog.tsx'),
            //用props可以将跳转链接里面的参数，注入到目标组件的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 = () => {
      //业务逻辑

    }

    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");

父组件里面的跳转的时候要注意，需要使用query传字符串参数，如果是一个对象参数，则需要通过JSON的stringify方法将其转为字符串，这是因为这些参数会被拼接到http的url里面，所以仅支持字符串类型，这就是为什么要在routers路由里面入口前，通过props函数又将这些字符串参数转回props属性真正的类型的原因

        {
            name: "testlog",
            path: '/dworks/log/testlog',
            component: components('SurroundingLog.tsx'),
            //用props可以将跳转链接里面的参数，注入到目标组件的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，可以使用超链接直接跳转，也可以使用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)

多页面应用，指有多个独立页面的应用（多个html页面），每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。项目是由多个完整的页面组成。多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载。文章来源地址https://www.toymoban.com/news/detail-491629.html

到了这里，关于vue3 route跳转的new tab两种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！