HTML Criar um URL para cada tab, para que quando atualize fique no mesmo formulario

[Enzo Vaz]

Queria adicionar um URL em cada TAB, ( UM EXEMPLO , usuário atualiza a página e ainda continua na mesma página).

<template>

    <div class="tela-register">

        <PageTitle icon="fa fa-desktop" main =" Registros dos Componentes TI"

            sub="Infraestrutura de TI" />

        <div class="tela-register-tabs">

            <!-- b tem referencia com bootstrap + vue-->

            <b-card no-body>

                <b-tabs card>

                    <b-tab title="Contrato">

                        <RegisterContrato />

                    </b-tab>

                    <b-tab title="Modelos">

                        <TelaModelo/>

                    </b-tab>

                    <b-tab title="Computador">

                        <RegisterComputador />

                    </b-tab>

                    <b-tab title="Monitor">

                        <RegisterMonitor />

                    </b-tab>

                    <b-tab title="Aparelho">

                        <RegisterAparelho />

                    </b-tab>

                    <b-tab title="Projetor">

                        <RegisterProjetor />

                    </b-tab>



                </b-tabs>

            </b-card>

        </div>

    </div>

</template>



<script>

import PageTitle from '../template/PageTitle'

import RegisterAparelho from './RegisterAparelho'

import RegisterComputador from './RegisterComputador'

import RegisterContrato from './RegisterContrato'

import RegisterMonitor from './RegisterMonitor'

import RegisterProjetor from './RegisterProjetor'

import TelaModelo from './TelaModelo'




export default {

    name: 'TelaRegister',

    components: { PageTitle, RegisterAparelho, RegisterComputador, RegisterContrato, RegisterMonitor, RegisterProjetor, TelaModelo}



}

</script>



<style>



</style>

 

[brund321]

@Enzo Vaz Oi, tudo bem? Eu estou confuso, não consegui compreender o que você deseja, tente exemplificar melhor para que eu possa tentar ajudá-lo.

Abraço.

[Leonardo0308]

Bom dia @Enzo Vaz

 

Como o colega @brund321 falou, está um pouco difícil de entender a sua duvida.

 

19 minutos atrás, Enzo Vaz disse:

( UM EXEMPLO , usuário atualiza a página e ainda continua na mesma página).

 

Mas julgando pelo que você colocou, se você quer atualizar o conteúdo da pagina, sem atualizar a pagina em si, você pode utilizar o AJAX do JavaScript / jQuery.

 

Documentação AJAX

 

Exemplo AJAX

 

 

[Enzo Vaz]

@Leonardo0308 @brund321 desculpa pessoal , é assim, quando o usuário cadastra algo no sistema a página automaticamente já da um reload na página, mas como a tabela está na mesma rota ele volta pro primeiro componente(aba), gostaria que quando ele cadastra-se, ele continua-se na mesma aba! segue imagem de exemplo.

 

Agradeço a ajuda desde já!

[brund321]

@Enzo Vaz Pelo o que eu entendi acontece isso: o usuário vai até a aba "Responsável" adiciona algo e a página faz um reload, mas a página volta na aba "Funcionários" e não na aba "Responsável", seria isso ?

Você está usando o Vue-Router?

[Enzo Vaz]

3 horas atrás, brund321 disse:

@Enzo Vaz Pelo o que eu entendi acontece isso: o usuário vai até a aba "Responsável" adiciona algo e a página faz um reload, mas a página volta na aba "Funcionários" e não na aba "Responsável", seria isso ?

Você está usando o Vue-Router?

sim, mas estou usando para todas as guias do sistemas, não sei se funciona com abas de tabs, teria como usa-lá ??

 

   /* Rotas do sistema para linkar em cada página */



    import Vue from 'vue'

    import VueRouter from 'vue-router'

    

    import Home from '@/components/home/Home'

    import TelaRegister from '@/components/register/TelaRegister'

    import TelaCadastro from '@/components/cadastro/TelaCadastro'

    import TelaConsultaRegister from '@/components/consultaRegister/TelaConsultaRegister'

    import TelaConsultaCadastro from '@/components/consultaCadastro/TelaConsultaCadastro'

    import TelaGestao from '@/components/gestao/TelaGestao'

    import AdminPages from '@/components/admin/AdminPages'

    import Auth from '@/components/auth/Auth'




    import { userKey } from '@/global'

    

    Vue.use(VueRouter)



    const routes = [{

        name: 'home',

        path: '/',

        component: Home

    },{

        name: 'TelaGestao',

        path: '/gestao',

        component: TelaGestao

    },{

        name: 'TelaRegister',

        path: '/registro',

        component: TelaRegister



    },{

        name: 'TelaCadastro',

        path: '/cadastro',

        component: TelaCadastro



    },{

        name: 'TelaConsultaRegister',

        path: '/consulta.register',

        component: TelaConsultaRegister



    },{

        name: 'TelaConsultaCadastro',

        path: '/consulta.cadastro',

        component: TelaConsultaCadastro



    },{

        name: 'adminPages',

        path: '/admin',

        component: AdminPages,

        meta: { requiresAdmin: true }

    }, {

        name: 'auth',

        path: '/auth',

        component: Auth

    }]

    



    const router = new VueRouter({

        mode: 'history',

        routes

    })



    router.beforeEach((to, from, next) => {

        const json = localStorage.getItem(userKey)

    

        if(to.matched.some(record => record.meta.requiresAdmin)) {

            const user = JSON.parse(json)

            user && user.admin ? next() : next({ path: '/' })

        } else {

            next()

        }

    })



    export default router

 

[brund321]

@Enzo Vaz Dê uma olhada aqui Enzo: https://router.vuejs.org/guide/essentials/nested-routes.html

Está em inglês, não consegui achar nada em português, se não for isso o que você procura ou estivar com alguma dúvida, é só postar aqui.

Abraço

[Enzo Vaz]

Não funcionou pessoal, utilizando da mesma forma não, acho que tem que usar de outra forma com vue-router 

[brund321]

@Enzo Vaz Eu não sei que aba está aberta ali(foto), mas vou supor que seja Registros então o url por exemplo seria localhost:8080/registros para abrir aquela aba.Caso você abrir a aba Funcionários dentro do Registros será localhost:8080/registros/funcionarios ,você está fazendo isso Enzo? 

[Enzo Vaz]

33 minutos atrás, brund321 disse:

@Enzo Vaz Eu não sei que aba está aberta ali(foto), mas vou supor que seja Registros então o url por exemplo seria localhost:8080/registros para abrir aquela aba.Caso você abrir a aba Funcionários dentro do Registros será localhost:8080/registros/funcionarios ,você está fazendo isso Enzo? 

Seria exatamente isso , ai caso selecionar funcionários, localhost:8080/registros/funcionarios, caso seleciona-se localhost:8080/registros/localizacao!

[brund321]

@Enzo Vaz Mas então se a página der um "reload" no localhost:8080/registros/funcionarios ela vai continuar no mesmo componente, o problema deve ser que ela está redirecionando para  localhost:8080/registros.