javascript - Component is mounted twice when refreshing from child route in history mode - Stack Overflow

admin管理员组

文章数量:1391964

I am using vue-router in history mode. When I am on on child route "/dashboard" and I refresh the page, the <ccp/> ponent is mounted twice. In the ccp ponent I am console logging in the created and mounted hook. I see that console output twice for each one. Any thoughts? Thanks in advance for looking!

Edit: On initial app load, <ccp/> is created and mounted only once.

Here's the code:

App.vue:

<template>
    <div v-show="isConnected">
      <ccp/>
      <router-view/>
    </div>
</template>

<script>
     // blah blah blah - doing stuff and then pushing route to /dashboard
    return this.$router.push({name: "dashboard"});
</script>

router.js

export default new Router({
mode: "history",
routes: [
// DEFAULT ROUTE
{
  path: "/",
  name: "root",
  alias: store.getters.isDemoMode ? "/demo" : "/app" // isDemoMode is false for this test however I wanted to show the alias config in case that is part of the problem.
},

{
  path: "/demo",
  name: "demo",
  ponent: Demo
},
{
  path: "/app",
  name: "app",
  ponent: App,
  children: [
    {
      path: "/dashboard",
      name: "dashboard",
      ponent: Dashboard
    }
  ]
 }
})

I am using vue-router in history mode. When I am on on child route "/dashboard" and I refresh the page, the <ccp/> ponent is mounted twice. In the ccp ponent I am console logging in the created and mounted hook. I see that console output twice for each one. Any thoughts? Thanks in advance for looking!

Edit: On initial app load, <ccp/> is created and mounted only once.

Here's the code:

App.vue:

<template>
    <div v-show="isConnected">
      <ccp/>
      <router-view/>
    </div>
</template>

<script>
     // blah blah blah - doing stuff and then pushing route to /dashboard
    return this.$router.push({name: "dashboard"});
</script>

router.js

export default new Router({
mode: "history",
routes: [
// DEFAULT ROUTE
{
  path: "/",
  name: "root",
  alias: store.getters.isDemoMode ? "/demo" : "/app" // isDemoMode is false for this test however I wanted to show the alias config in case that is part of the problem.
},

{
  path: "/demo",
  name: "demo",
  ponent: Demo
},
{
  path: "/app",
  name: "app",
  ponent: App,
  children: [
    {
      path: "/dashboard",
      name: "dashboard",
      ponent: Dashboard
    }
  ]
 }
})

• javascript
• vue.js
• vue-router

Share Improve this question Follow edited Sep 16, 2018 at 5:26 Chris Newell asked Sep 16, 2018 at 3:57 Chris NewellChris Newell 14722 silver badges1010 bronze badges 4

• 1 I think issue is somewhere in your page / javascript .. You are possibly importing this into another file which makes it run 2x .. I had similar issue where I had 1 on click listener but I imported the main app.js into another file and it was executing 2x – I am Cavic Commented Sep 16, 2018 at 4:00
• 1 I think if that was the case it would mount twice on initial app load right? – Chris Newell Commented Sep 16, 2018 at 4:02
• Just go through your JS files and see if you are doing import anywhere .. If not make sure in your html you are not adding it 2x by mistake – I am Cavic Commented Sep 16, 2018 at 4:04
• Dang, I was hoping it was something as simple as that but I just went through all involved ponents, <ccp/> is only referenced once in App.vue and not anywhere else. Searched using vscode in the project root to confirm it's not imported anywhere else either. – Chris Newell Commented Sep 16, 2018 at 4:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

It's mounted twice likely due to the App ponent also being part of your route. Your route named "app" is mounting App again.

本文标签： javascriptComponent is mounted twice when refreshing from child route in history modeStack Overflow