Vue-路由(router)的全局配置

一、安装

NPM安装：

npm install vue-router

 

二、创建路由模块

在src中创建router文件夹，文件名为index.js

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


// 1.创建路由对象
const router = new VueRouter({
    // 2.添加路由配置，通过routes来添加路由配置
    routes: [
        //3.添加具体的路由配置：配置的本质就是将路由映射到组件
        //我们可以设置为如下几个选项：
        // name:路由名称
        // path:路由路径
        // component:路由所映射的组件对象
        // redirect 
        // children
        {
            name: 'index',
            path: '/index',
            // 异步引入组件,确保匹配了路由才加载组件，否则不利于优化
            component: () => import('@/views/index.vue')
        }

    ]
})
// 4.暴露
export default router

三、注入路由

在main.js中注入路由

//引入路由模块
import router from '@/router/index.js'
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

四、映射

在根组件APP.vue全局映射

<template>
  <div id="app">
    <!-- 路由映射的组件将在这里渲染 -->
    <router-view></router-view>
  </div>
</template>