vue-----路由（router）的全局配置

vue中的路由一般是指页面跳转的路径，我们需要做的事，将组件（components)映射到路由（routes），然后告诉Vue Router在哪里渲染它们。

• VueRouter:构造函数，通过它实例化路由模块对象
• routes:添加路由配置1
• router:注入路由
• router-view:路由所映射组件的展示区域
• router-link:路由超链接
• $route:获取路由参数，它是一个对象
• $router：实现路由跳转，以代码的方式来实现

一、安装

NPM安装：npm install vue-router

二、创建路由模块

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

//当前项目的路由模块
//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能
import Vue from 'vue'
//安装好后就会有vue-router
import VueRouter from 'vue-router'
//在当前项目中安装路由
Vue.use(VueRouter)


// 1.创建路由对象
const router = new VueRouter({
    // 2.添加路由配置，通过routes来添加路由配置
    routes: [
        //3.添加具体的路由配置：配置的本质就是将路由映射到组件
        //一般来说，我们可以设置为如下几个选项：name path component redirect children
        // name:路由名称
        //path:路由路径
        //component:路由所映射的组件对象
        {
            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>

五、效果

常见错误

1.route config “component” for path: /index cannot be a string id. Use an actual component instead.
路由配置中的component没有设置为一个组件实例对象

2.Missing required prop: “to”
router-link必须有to属性

3.代码没有错误，但是看不到效果
a.没有注入
b.没有添加router-view