一个vue路由的问题,路由改变,页面不变?
**图片有点模糊,将就一下,高质量的图片试了很多次传不上去。
大致就是从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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
怎么测都是好的,代码如下,大部分copy你得代码,路径可能有点不同
![image image](/img/bVbREJ9)
效果如图
这是login页面,没啥内容,login下面没有子路由,main.vue下面有子路由
路由守卫了解一下