一个vue路由的问题,路由改变,页面不变?

发布于 2022-09-12 04:48:25 字数 1671 浏览 13 评论 0

image

**图片有点模糊,将就一下,高质量的图片试了很多次传不上去。
大致就是从login的页面跳转到home界面后,router-view里面的内容变成了login的内容,about的内容倒是没有变,什么原因?怎么解决?**

//路由配置
const routes: Array<RouteConfig> = [

 {

 path: '/login',

 name: 'Login',

 component: () => import('../views/Account/Login.vue')

 },

 {

 path: '/',

 name: 'Main',

 component: Main,

 redirect: 'home',

 children: [

 {

 path: '/home',

 name: 'Home',

 component: () => import('../views/Home/Home.vue')

 },

 {

 path: '/about',

 name: 'About',

 // route level code-splitting

 // this generates a separate chunk (about.[hash].js) for this route

 // which is lazy-loaded when the route is visited.

 component: () => import(/* webpackChunkName: "about" */ '../views/About/About.vue')

 },

 ]

 },

]
const router = new VueRouter({

 mode: 'history',

 base: process.env.BASE_URL,

 routes

})
//home页面
<template>

 <div class="hhh">

 <img alt="Vue logo" src="../../assets/logo.png" />

 </div>

</template>

<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

export default class Home extends Vue {}

</script>

<style lang="less">

</style>
//主页面,就是有router-view的,app.vue中只有一个router-view

<template>

 <div class="home">

 <div id="nav">

 <router-link to="/home">Home</router-link> |

 <router-link to="/about">About</router-link> |

 <router-link to="/login">login</router-link>

 </div>

 <router-view />

 </div>

</template>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

怀里藏娇 2022-09-19 04:48:25

怎么测都是好的,代码如下,大部分copy你得代码,路径可能有点不同
效果如图
image

// 路由配置
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Main from '../views/Main.vue'
Vue.use(VueRouter)

  const routes: Array<RouteConfig> = [

    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/Account/Login.vue')
    },
    {
      path: '/',
      name: 'Main',
      component: Main,
      redirect: 'home',
      children: [
        {
          path: '/home',
          name: 'Home',
          component: () => import('../views/Home.vue')
        },
        {
          path: '/about',
          name: 'About',
          // route level code-splitting

          // this generates a separate chunk (about.[hash].js) for this route

          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        },
      ]
    },
  ]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
// login页面
<template>
 <div>
 <router-link to="/home">跳转到首页</router-link>
 </div>
</template>
<script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 export default class Login extends Vue {}
</script>
<style lang="less">
</style>
// main页面
<template>
 <div class="home">
 <div id="nav">
 <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/login">login</router-link>
 </div>
 <router-view />
 </div>
</template>
<script>
 export default {
    name: "Main"
 }
</script>
<style scoped>
</style>
// about页面
<template>
 <div class="about">
 <h1>This is an about page</h1>
 </div></template>
<script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
 @Component
 export default class About extends Vue{
    private created() {
      console.log(this.$route)
    }
  }
</script>
// home页面
<template>
 <div class="hhh">
 <img src="../assets/logo.png" />
 </div>
</template>
<script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
 @Component
 export default class Home extends Vue {
  }
</script>
<style lang="less">
</style>
// app页面
<template>
 <div class="home">
<!--    <div id="nav">-->
<!--      <router-link to="/main/home">Home</router-link> |-->
<!--      <router-link to="/main/about">About</router-link> |-->
<!--      <router-link to="/login">login</router-link>-->
<!--    </div>-->
 <router-view />
 </div>
</template>
<script lang="ts">
 import {Component, Vue, Watch} from "vue-property-decorator";
 @Component
 export default class App extends Vue {
    // @Watch('key')
 // public watchKey(newV: any) { //   console.log(newV) // } // // get key() { //   console.log(1) //   return this.$route.fullPath // }
 public mounted() {
      console.log(this.$route)
    }
  }
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
#nav {
  padding: 30px;
 a {
    font-weight: bold;
 color: #2c3e50;
 &.router-link-exact-active {
      color: #42b983;
 }
  }
}
</style>
少钕鈤記 2022-09-19 04:48:25
<template>

 <div>

 <router-link to="/home">跳转到首页</router-link>

 </div>

</template>

<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

export default class Login extends Vue {}

</script>

<style lang="less">

</style>

这是login页面,没啥内容,login下面没有子路由,main.vue下面有子路由

简美 2022-09-19 04:48:25

路由守卫了解一下

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文