现在很多的后台管理系统都采用标签选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再切换,而vue要做标签选项卡,推荐使用& lt; router-link> & lt;/router-link>实现一个标签的效果,然后使用& lt; router-view> & lt;/router-view>实现插槽的效果,把对应的页面“塞进”去,具体实现看下面的案例:
1,这是标签选项卡的页,面布局就不说了,主要的是& lt; router-link:="。url”:关键="指数" v="(指数),在数据”在{{a.title}} & lt;/router-link>,其中,指向你要跳转的路径,这是关键,而& lt; router-view> & lt;/router-view>就是最终其他子页面要显示的地方
& lt; template>
& lt; div类=癷ndex-box”比;
& lt; nav>
& lt; h2>导航& lt;/h2>
& lt; !——所有的导航标题,进行路由跳转指向——比;
& lt; router-link:="。url”:关键="指数" v="(指数),在数据”在{{a.title}} & lt;/router-link>
& lt;/nav>
& lt; div类=澳谌荨北?
& lt; !——路由插槽:路由跳转的位置——比;
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
从“. ./. ./静态导入navData/数据/nav "
出口默认{
名称:“指数”,
数据(){
返回{
数据:[]
}
}，
方法:{
init () {
这一点。数据=https://www.yisu.com/zixun/navData.navData;
}
}，
创建(){
this.init ();
}
}> /*容器*/.index-box {
宽度:100%;
高度:100%;
背景:# 212224;
显示:flex;
}/*左侧导航条*/nav {
宽度:260 px;
高度:100%;
背景:# 323437;
溢出:隐藏;
浮:左;
}/*导航*/nav h2 {
颜色:# f2ffff;
保证金:10 px 0 10 px 10 px;
}/*导航标题*/资产净值一个{
显示:块;
宽度:100%;
高度:45 px;
颜色:# f2ffff;
背景:# 2 e3033;
padding-left: 10 px;
行高:45 px;
字体大小:20 px;
margin-bottom: 10 px;
}/*右侧内容*/.content {
flex: 1;
填充:20 px;
}
2路由配置
这个案例中,默认显示的就是我标签选项卡的页面,所以其他子页面我就以这个页面配置的子路由
如果有其他需求,就再需要的地方配置子路由即可
从“Vue”进口Vue
从“vue-router”进口路由器//首页
从“. ./页面/进口标签选项卡”//页面一
从“. ./页面/进口PageOne PageOne”//页面二
从“. ./页面/进口PageTwo PageTwo”//页面三
从“. ./页面/进口PageThree PageThree”
Vue.use(路由器);
出口默认新路由器({
路线:[
{//默认显示的页面
路径:“/?
名称:“选项卡”,
组件:选项卡,
孩子:(
{//子路由中默认显示的页面
路径:”,
名称:“PageOne”,
组件:PageOne
}，
{
路径:“PageTwo”,
名称:“PageTwo”,
组件:PageTwo
}，
{
路径:“PageThree”,
名称:“PageThree”,
组件:PageThree
}
]
}
]
})
这里再提供一种情况:比如我默认显示的是登录页面,登录进入后是首页,是标签选项卡的布局,所以我只要给首页配置子路由就可以了
从“Vue”进口Vue
从“vue-router”进口路由器//导入HelloWorld从“@/组件/HelloWorld”//首页框架
从“. ./页面/进口指数指数”;//首页
从“. ./组件/功能/进口FunctionsIndex FunctionsIndex”;//数据源列的表
从“. ./组件/功能/进口FunctionsDbSource FunctionsDbSource”//角色管理
从“. ./组件/功能/进口FunctionsRoleManagement FunctionsRoleManagement”//登录
从“. ./页面/进口登录登录”
Vue.use(路由器);
出口默认新路由器({
linkExactActiveClass:“法案”,
模式:“历史”,
路线:[
{//首页
路径:/索引,
名称:“指数”,
组件:指数,
孩子:(
{//首页中默认显示统计页面
路径:”,
名称:“总”,
组件:FunctionsIndex
}，
{
路径:“DbSource”,
名称:“DbSource”,
组件:FunctionsDbSource
}，
{
路径:“RoleManagement”,
名称:“RoleManagement”,
组件:FunctionsRoleManagement
}
]
}，//默认显示登录页面
{
路径:“/?
名称:“登录”,
组件:登录
}
]
})
