概述
在做前端vue项目测试时,发现在路由配置中配置访问地址“http://ip:port/” 重定向到某个地址时,界面没有显示重定向后的地址。
能保证的是我的vue写法绝对没错。
简要代码
App.vue:
<template>
<div id="app">
<router-view/>
</div>
</template>
index.vue:容器
<template>
<el-container>
<el-header>
<web-menu></web-menu>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</template>
<script>
import webMenu from "@/views/menu/WebMenu";
export default {
name: "index",
components:{
webMenu
}
}
</script>
<style scoped>
</style>
webMenu.vue:
<template>
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</template>
<script>
export default {
name: "Menu",
data(){
return{
activeIndex2: '1'
}
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
<style scoped>
</style>
路由配置:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'all',
redirect: '/home',
children:[
{
path: '/home',
name: 'home',
component: () => import('@/views/menu/index.vue')
}
]
}
]
})
问题
浏览器访问 http://localhost:8070/#/ 或 http://localhost:8070/,地址最终能重定向到 http://localhost:8070/home。但是页面没有展示对应页面中的内容。
解决办法
通过测试发现,如果是初始路由 “/” 配置转发时,如果转发到"/"的子路由中,就会出现无法找到页面的情况。以上的路由配置就是这个问题导致的。所以做以下修改:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'all',
redirect: '/home',
},
{
path: '/home',
name: 'home',
component: () => import('@/views/menu/index.vue')
}
]
})
注意:只有在路由“/”重定向到自己的子路由才会出现这个问题,但是如果时非"/",例如“/home”,重定向到子路由“/home/basci”就不会出现问题。