vue router的基本使用和配置教程

 import Vue from \'vue\'
 import App from \'./App\'
 import router from \'./router/index.js\' // 引入路由
 Vue.config.productionTip = false 
 /* eslint-disable no-new */
 new Vue({
  el: \'#app\',
  router, // 在挂载点中注入vue
  components: { App },
  template: \'<app/>\'
 })

import Vue from \'vue\'
 import Router from \'vue-router\' // 引入vue-router 
 // 引入要跳转的vue组件
 import Manage from \'@/page/admin/Manage\'
 import userList from \'@/page/admin/userList\'
 import addUser from \'@/page/admin/addUser\'
 import shopList from \'@/page/admin/shopList\'
 import addShop from \'@/page/admin/addShop\'
 Vue.use(Router) // 在vue中注入Router
 // 配置路由路径
 const routes =[
  {
      path: \'/\',
      name: \'Login\',
      component: Login // 需要跳转的组件
     },
     {
      path: \'/Manage\',
      name: \'Manage\',
      component: Manage,
      children: [{
       path: \'/userList\',
       component: userList,
        : [\'数据管理\', \'用户列表\']
      },
      {
       path: \'/shopList\',
       component: shopList,
        : [\'数据管理\', \'商品列表\']
      },
      {
       path: \'/addUser\',
       component: addUser,
        : [\'添加数据\', \'添加用户\']
      },
      {
       path: \'/addShop\',
       component: addShop,
        : [\'添加数据\', \'添加商品\']
      }
     ]
     },
     {
      path: \'/home\',
      name: \'Home\',
      component: Home
     },
     {
      path: \'/helloworld\',
      name: \'Home\',
      component: HelloWorld
     }
 ]
 // 将路径注入到Router中
 var router=new Router({
  \'mode\': \'history\',
  routes
 })
 // 导出路由
 export default router;