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,default: {}},show: {type: Boolean as PropType,default: false},pageType: {type: String as PropType}
}
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 ({this.$props.row.message})}})
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等)需选择性重新加载。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！