vue搭建后台管理页面（点击左侧导航，切换右侧内容）

home.vue页面

 

插件Page1，Page2，Page3页面

 

index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import Page1 from '@/components/page1'
import Page2 from '@/components/page2'
import Page3 from '@/components/page3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
　　　 redirect:"Page1",//重定向，第一次进入就进入Page1，不添加的话第一次进入右侧是空白
      children:[
        {
          path: '/Page1',
          name: 'Page1',
          component: Page1
        },
        {
          path: '/Page2',
          name: 'Page2',
          component: Page2
        },
        {
          path: '/Page3',
          name: 'Page3',
          component: Page3
        }
      ]
    }
  ]
})

　　

 

 

添加redirect:"Page1"，输入地址的时候重定向效果

 

没添加redirect:"Page1"，输入地址没重定向效果

 

 

一、home.vue的

二、home.vue的this.$router.push('/Page1')

三、index.js添加redirect:"Page1"重定向

四、index.js的children子路由

 

转载于:https://www.cnblogs.com/YAN-HUA/p/9707654.html