前言
在一些复杂的项目中,我们经常遇到一些这样的场景。比如点击左边菜单栏,显示右边一级路由,一级路由一个类似于table切换的功能,我们默认显示第一个,有可能要默认显示第三个的情况。这个时候就需要用到重定向。 /hippo/tasks 是相当于一级路由,用来切换,默认情况下需要展示第一个子路由
跳转到 /hippo/tasks 的时候直接显示 子路由
export default new Router({
{ path: '/hippo/tasks', component: hippoTasks, name: '任务完成情况监控',
children:[
{ path: '/hippo/tasks/jobanalysis', component: hippoTasksJobanalysis, name: '趋势分析'},
{ path: '/hippo/tasks/history', component: hippoTasksHistory, name: '归类分析'},
{ path: '/hippo/tasks/probability', component: hippoTasksProbability, name: '概率分析'}
],
redirect:'/hippo/tasks/jobanalysis'
}
})
一级路由类似 tabs切换
如果在不使用重定向的情况下,默认情况下页面是没有内容的,所以要重定向你要显示的页面就可以啦。link-router默认情况下可以用 router-link-active
设置点击之后的Class 样式,
<template>
<ul>
<li v-for="item in TabsList" :key="rtList.name">
<router-link class="type" :to="item.url">{{item.name}}</router-link>
</li>
</ul>
<router-view></router-view>
</template>
<script>
export default {
data() {
return {
TabsList: [
{
name: "趋势分析",
url: "/hippo/tasks/jobanalysis"
},
{
name: "归类信息",
url: "/hippo/tasks/history"
},
{
name: "概率分析",
url: "/hippo/tasks/probability"
}
]
};
}
};
</script>