使用 vuejs 打开新的 html 页面选项卡

Question

I have being converting static html pages to vuejs and I have this file called printable.html that receives variables from url and extracting it using simple jquery. I don't want to convert this file to a vueJs instead, after @click="printPage" I would like to open a new tab that can display printable.html page with url something like this. http://localhost:8080/printable.html?diff=5&carCost=125.0

            printPage() {
                if(!this.active_el) {
                    // show error
                } else  {
                    //hide error
                    console.log(this.selectedCar[0].Name)
                    let url =
                        this.buildUrl('printable.html', 'diff', this.possibleReservationData.totalDays) +
                        this.buildUrl('', 'carCost', this.carPrice) +
                        this.buildUrl('', 'deposite', this.deposit) +
                        this.buildUrl('', 'subTotal', this.subTotal) +;
                    window.open(url, '_blank');
                }

            },

I also tried to use router

import printable from '../../views/printable.html';
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {path: '/', name: 'Home', component: HomeView},
        {path: '/printable', name: 'printable', component: printable}
    ]
});

but obviously this didn't work.

can anyone advice me how to do this, is that even possilbe? Just don't want to go through the hassle and convert something into vueJs that doesn't need to be converted.

Answer 1

window.open is the right method to call your desired URL in a new tab. But did you check the value of your url variable? Since you are using some other method this.buildUrl to construct this URL, I can't tell what kind of URL you are creating, but why don't you use this to create the URL:

const url = new URL(location.origin + '/printable.html');
url.searchParams('diff', this.carPrice);
url.searchParams('deposite', this.deposit);
url.searchParams('subTotal', this.subTotal);
window.open(url.toString(), '_blank');

This creates the desired URL.