router vue 页签文字_vue项目登录页面+后台页面router.js配置以及组件编写的问题

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue';

import App from './App';

import router from './router';

import './assets/custom.scss';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-default/index.css';

import store from '@/store/index';

Vue.config.productionTip = false;

Vue.use(ElementUI);

router.beforeEach((to, from, next) => {

//NProgress.start();

if (to.path == '/login') {

sessionStorage.removeItem('user');

}

let user = JSON.parse(sessionStorage.getItem('user'));

if (!user && to.path != '/login') {

next({ path: '/login' })

} else {

next()

}

});

/* eslint-disable no-new */

new Vue({

el: '#app',

router,

store,

template: '',

components: { App }

});

app.vue template部分

后台管理系统

v-model="activeIndex"

type="border-card"

closable

@tab-click="tabClick"

v-if="options.length"

@tab-remove="tabRemove">

:key="item.name"

v-for="(item, index) in options"

:label="item.name"

:name="item.route">

router.js

import Vue from 'vue'

import Router from 'vue-router'

import Template from '@/components/Template'

import ElementTable from '@/components/ElementTable'

import DetailInfo from '@/components/DetailInfo'

import Login from '@/components/Login'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: '首页',

component: Template

},

{

path: '/login',

name: '登录页面',

component: Login,

},

{

path: '/user',

name: '用户管理',

component: ElementTable,

},

{

path: '/userInfo/:id',

name: '用户详情页',

component: DetailInfo

},

{

path: '/psd',

name: '密码管理',

component: Template

},

{

path: '/salary',

name: '工资管理',

component: Template

},

{

path: '/attendence',

name: '考勤管理',

component: Template

},

{

path: '/perform',

name: '绩效管理',

component: Template

},

{

path: '/admin',

name: '系统管理',

component: Template

},

{

path: '/feedback',

name: '意见反馈',

component: Template

},

{

path: '*',

redirect: '/'

}

]

})

为何我配置好之后的页面如下

想要实现内容页 跟 登录页分离 应该修改什么地方