The vue page has just entered the login page. Click to log in and jump to the home page.

app.vue 
<template>
  <div id="app">
    <login></login>
    <router-view/>
  </div>
</template>
<script>
import login from "./components/login/login.vue"
  export default {
    name: "App",
    components:{
      login
    }
  }
</script>
login.vue 
<template>
    <div class="login">
      <form action="">
        <input type="text" placeholder="//"><br>
        <input type="password" placeholder="">
        <router-link :to="{name:"Tabbar"}"><input type="button" value="" class="btn"/>                           </router-link>
      </form>
    </div>
</template>

tabbar.vue 

<template>
  <div class="tabbar">
    <child @back="getValue" mark="home" :sel="select" title="">
      <img src="../assets/ic_tab_home_normal.png" slot="active"/>
      <img src="../assets/ic_tab_home_active.png" slot="normal"/>
    </child>
    <child @back="getValue" mark="team" :sel="select" title="">
      <img src="../assets/ic_tab_subject_normal.png" slot="active"/>
      <img src="../assets/ic_tab_subject_active.png" slot="normal"/>
    </child>
    <child @back="getValue" mark="salary" :sel="select" title="">
      <img src="../assets/ic_tab_status_normal.png" slot="active"/>
      <img src="../assets/ic_tab_status_active.png" slot="normal"/>
    </child>
    <child @back="getValue" mark="check" :sel="select" title="">
      <img src="../assets/ic_tab_group_normal.png" slot="active"/>
      <img src="../assets/ic_tab_group_active.png" slot="normal"/>
    </child>
    <child @back="getValue" mark="personal" :sel="select" title="">
      <img src="../assets/ic_tab_profile_female_normal.png" slot="active"/>
      <img src="../assets/ic_tab_profile_female_active.png" slot="normal"/>
    </child>
  </div>
</template>
<script>

  import child from "./child"

  export default {
    components: {
      child
    },
    data: function () {
      return {select: "home"}
    },
    methods: {
      getValue: function (n) {
        this.select = n;
      }
    }
  }
</script>

index.js 

import Vue from "vue"
import Router from "vue-router"
import Tabbar from "@/components/tabbar"
import Home from "@/components/home/home"
import Classify from "@/components/classify/classify"
import Team from "@/components/team/team"
import Salary from "@/components/salary/salary"
import Check from "@/components/check/check"
import Personal from "@/components/personal/personal"
Vue.use(Router);
export default new Router({
  mode: "history",
  routes: [
    {
      path: "/tabbar",
      name: "Tabbar",
      component: Tabbar,
    },
    {
      path: "/home",
      name: "Home",
      component: Home,
    },{
      path: "/salary",
      name: "Salary",
      component: Salary,
      redirect: {name: "TermSearch"},
      children:[
        {path:"termSearch",name: "TermSearch",component:TermSearch},
        {path:"termAnalyse",name: "TermAnalyse",component:TermAnalyse}
      ]
    },
    {
      path: "/check",
      name: "Check",
      component: Check,
      redirect: {name: "PersonWarn"},
      children:[
        {path:"personWarn",name: "PersonWarn",component:PersonWarn},
        {path:"teamWarn",name: "TeamWarn",component:TeamWarn}
      ]
    },
    {
      path: "/personal",
      name: "Personal",
      component: Personal
    },    
  ]
})

clipboard.png

clipboard.png

this is the effect after clicking to log in, but the route jumps to the tabbar,login page but still exists, and the home page is not displayed.
Click on the home page, the home page shows, and the tabbar does not show whether the
login page cannot be specified in the app.vue

.

ask the boss for advice

Vue.js vue-router
Mar.28,2022

routing index.js 

...
const router = new Router({
    routes: [
        {
            path: '/login',
            name: 'Login',
            component: () => import('@/components/login/login')//
        },
        {
          path: '/home',
          name: 'Home',
          component: () => import('@/components/home/home'),
        }
        ...
    ]
})
router.beforeEach((to, from, next) => {
    //
    const userinfo = localStorage.userinfo
    if(userInfo || to.name === 'Login'){
        //
        next()
    }else {
        //
        //
        //
        next({
          name: 'Login',
          query: {
            redirect: to.path
          }
        })
    }
})
export default router

Login login component 

//login
toLogin(){
    //
    //...
    //redirect
    const redirect = this.$route.query.redirect
    if(redirect){
        //
        this.$router.push(redirect)
    }else{
        //
        this.$router.push({
          name: 'Home'
        })
    }
}

calm down and think about it. I solved it like this:
1, create a large frame (app.vue file), and then there are two components (login.vue and tabbar.vue) in it.
2. In login.vue, click the login button and use this.$router.replace ({path:'/ the path to your tabbar component'}).
3. Write < router-view / > subcomponents in tabbar.vue are other pages.
4. It would be nice to define the default display of a subcomponent for a tabbar component.

app.vue:
< template > 

<router-view></router-view>

< / div >
< / template >

tabbar.vue:
< template >


< router-view > < / router-view >


< / div >
< / template >

router.js routing table:
< script >
import app from'. / app.vue'; / / this is a large framework for putting login and tabbar components
import login from'. / login.vue';
import tabbar from'. / tabbar.vue';
/ / introducing all sub-components.

var router=new VueRouter ({

) 
routes:[
    {path:'/',redirect:'login'},
    {path:'/login',component:login},
    {path:'/index',component:tabbar,
        children:[
            {path:'/',redirect:'/index/main'},    //
            {path:'main',component:main}
            //...
            ]
    }
]

})
< / script >

where can I see your vue-router configuration? app.vue components should not be stored in login . Just keep a router-view . Components should be loaded through vue-router

.

Previous: How does CPP get the Unicode value of emoji?

Next: Https key exchange

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu