VUE.JS的路由配置

        介绍

                路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件

        安装

                npm install vue-router

        配置

                在src文件新建文件夹router用来存放路由器的配置文件

在routes.js中引入所需要展示的页面

 配置一级路由路径

图中Test02为引入的页面，名称与上方import的值对应

 path为定义的路由路径

App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。

配置好路由之后在App.vue中 <div id ="app"></div>中放置一个<router-view></router-view> 将路由器匹配的组件渲染在这里。

二级路由配置原理基本一致

 即在所在的一级路由的配置下添加children:[填写当前二级路由的路径的配置信息]

 二级路由的路径需填所在一级路由的路径后接二级路径

同样在所在的一级路径所属页面下的div里面也放置一个<router-view></router-view> 将路由器匹配的组件渲染在这里。

最后再通过

export default routers(与上定义routers对应)  输出routers

切换到main.js下

引入  import VueRouter from 'vue-router'  

再引入刚刚所配置好的路由

 引进的vue-router必须要通过 Vue.use()使用路由

构建VueRouter对象，把引进的路由配置文件放进去

Vue.config.productionTip = false
上面这行代码的意思 是阻止显示生产模式的消息。
如果没有这行代码，或者设置为true，控制台就会多出这么一段代码。

You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.

大概意思就是：
你运行的Vu是开发模式。为生产部署时，请确保启用生产模式。

new Vue({ render: h => h(App), }).$mount('#app')

这里创建的vue实例没有el属性，而是在实例后面添加了一个$mount(’#app’)方法。

$mount(’#app’) ：手动挂载到id为app的dom中的意思

 再将构建的VueRouter对象放进来即可。