VUE创建路由

1：新建一个文件

import VueRouter from 'vue-router'
import Vue from 'vue'
import A from '@/components/A.vue'
import B from '@/components/B.vue'

import Home from '@/components/Home'
import About from '@/components/About'
import User from '@/components/User'

const A=()=>import('../components/A')  // 这个是懒加载方式，让打包的时候可以生成多个JS文件（防止都打包进入一个文件,如果这么写下面的routes就不用变了）
const B=()=>import('../components/B')

const Message=()=>import('../components/message')
const News=()=>import('../components/news')



// 如果需要打包，命令是npm run build，   打包的文件生成在dist目录里面


Vue.use(VueRouter)

const routes = [
    {
      path: '',
      redirect: '/Home'
    },
    {
      path: '/A',
      component: A
    },
    {
      path: '/B',
      component: B
    }
    ,
    {
      path: '/Home',
      component: Home,
      children:[--------------------------------//这里是子嵌套，访问的时候是/Home/News
        {
          path:'News',
          component:News
        },
        {
          path:'Message',
          component:Message
        },

      ]
    },
    {
      path: '/About',
      component: About
    }
    ,
    {
      path: '/User/:userid',
      component: User
    }
  ]

  const router=new VueRouter({
      routes,
      mode:'history',
      linkActiveClass:''
  })
  export default router;-------------------导出文件

修改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'



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,               ---------------------这里必须叫router否则无效
  components: { App },
  template: '<App/>'
})