vue中配置router路由

我这里使用的是vue-cli脚手架，可以看我上篇文章配置axios

1.安装路由，前提是需要先安装node，才能使用npm这个命令

npm i vue-router@3.5.3 -S

2.配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
//import Layout from '@/layout'

export const constantRoutes = [
  {
    path: '/',
    component: () => import('@/components/Home'),
    hidden: true
  },
  {
    path: '/admin',
    component: () => import('@/components/Admin'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

//   {
//     path: '/',
//     component: Layout,
//     redirect: '/dashboard',
//     children: [{
//       path: 'dashboard',
//       name: 'Muisc后台管理',
//       component: () => import('@/views/dashboard/index'),
//       meta: { title: 'Muisc后台管理', icon: 'dashboard' }
//     }]
//   },

//   {
//     path: '/admin',
//     component: Layout,
//     redirect: '/admin/list',
//     name: '用户管理',
//     alwaysShow:true,
//     meta: { title: '用户管理', icon: 'el-icon-s-help' },
//     children: [
//       {
//         path: 'list',
//         name: 'List',
//         component: () => import('@/views/admin/list'),
//         meta: { title: '用户列表', icon: 'table' }
//       }
//     ]
//   },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

 3.在main.js中引用路由并在渲染之前进行挂载

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import router from './router'

Vue.config.productionTip = false
Vue.use(ElementUI)
//放在vue原型对象上，全局使用
Vue.prototype.axios = axios
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

4.在App.vue根组件中使用router-view标签作为路由出口