5.引入路由，

下载

npm install vue-router -S

使用

import VueRouter from 'vue-router'
Vue.use(VueRouter)

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from '../page/Login.vue'
import Home from '../page/Home.vue'

// 文章
import Articles from "../page/article/Articles.vue"
import ArticleCategory from "../page/article/ArticleCategory.vue"
import CallBack from "../page/article/CallBack.vue"
//system
import  Menu from '../page/system/Menu.vue'
import  Member from '../page/system/Member.vue'
import  Role from '../page/system/Role.vue'

//单页管理
import  About from '../page/single/About.vue'

Vue.use(VueRouter)    
let routes = [
  {
    path: '/Login',
    name: '登录',
    component: Login
  },
 
   {
    path: '/',
    name: '登录',
    component: Home
   },
    {
    path: '/',
    name: '文章管理',
    component: Home,
    children:[
      
       {
        path: '/articlecategory',
        name: '文章分类',
        component: ArticleCategory
       },
        {
        path: '/articles',
        name: '文章列表',
        component: Articles
       },
       {
        path: '/callback',
        name: '回收站',
        component: CallBack
       }

     ]
   },
   
     {
    path: '/',
    name: '单页管理',
    component: Home,
    children:[
      
       {
        path: '/about',
        name: '关于我',
        component: About
       },
      
     ]
   },

   


]

const router = new VueRouter({
  mode: 'history',   // 默认以#号路由，
  routes
})

export default router

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
import router from './router'   //路由 

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})