vue中的路由

　　昨天开始学习vue中的路由，在看到Vue中的路由时，路由作为网络管理中还算高深的词汇用在网页的前端开发中，感觉很奇怪。
　　开始接触vue中的路由时，以为同样需要高深的知识体系或者技能才能掌握。
　　事实上不是这样的。
　　在网络管理中，以前路由器和交换机是有明显区别的，比如网络设备分路由器、交换机，路由器专职做不同网段间的数据包转发，现在这个界线模糊了，很多交换机实现了路由功能，可以看尤雨溪懂网络，他在写Vue中的路由时借助了这一概念。
　　简单地说，vue中的路由就是截取网页中的地址跳转，按照开发者在路由设定中的规则进行来进行网页跳转。
　　通过路由配置，可以定义不同 URL 地址与对应组件之间的对应（映射）关系，以实现页面间的无刷新跳转和动态加载组件，在 Vue 应用中可以实现单页面应用（SPA）的效果，这样网页端的应用就有更流畅、更友好的用户体验。

　　一、使用vue创建项目

　　去年二月份写了《创建基于Vue2.0开发项目的两种方式》，没有真正动手去写代码，这次要实践写代码，并理解程序的运行原理和逻辑。

　　做简单修改：
　　1、APP.vue

　　2、header.vue

　　3、psp.vue

　　运行结果：

　　1、运行npm run serve和运行npm run build后程序运行逻辑不同，npm run build后程序入口文件index.html内嵌入了后续运行所需要的代码，那么就可以作为发行文件的入口，而npm run serve后程序依然由vue的应用服务接管。
　　3、网页应用的入口由应用服务指定，程序入口文件为index.html，在运行npm run serve后index.html内并没有嵌入js文件。
　　4、在启动时由应用服务进行绑定工作，先运行main.js进行对象绑定，先绑定app.vue中的App，注册到index.html的app中。
　　5、App.vue中引入了header.vue和psp.vue。
　　6、App.vue中使用了Header和PSP，要在export中注明，否则其他程序在执行App.vue文件中的组件时就报错。
　　7、注意，Header一定要首字符大写，如果因为header与系统内部的定义冲突。
　　8、在传参时注意，如果定义变量是字符，那么规范的写法是”‘这是传入的字符’“。
　　9、简单理解：npm run serve运行后，先运行main.js，进行app.vue的渲染（引入组件并进行渲染），完成所有准备后程序定位到index.html。

　　二、简单路由试验

　　虽然vue中的路由仅仅借助了网络中的路由概念，原理不复杂就只是做数据转发，但是容易出现的错误点也挺多的。
　　学习一下vue中的实际路由。

　　1、main.js文件内容：

import Vue from 'vue'
import App from './App.vue'
import router from './router/myrouter.js'

Vue.config.productionTip = false

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

　　2、App.vue文件内容：

　　3、路由文件myrouter.js内容：

import Vue from 'vue'
import Router from 'vue-router'
import MySearch from '../views/MySearch.vue'
import MyTable from '../views/MyTable.vue'
import MyHome from '../views/Home.vue'

Vue.use(Router)

//定义路由组件的信息
const routes=[
    {
        path:'/',
        name:'MyHome',
        component:MyHome
    },
    {
        path:'/MySearch',
        name:'MySearch',
        component:MySearch,
        props: true
    },
    {
        path:'/MyTable',
        name:'MyTable',
        component:MyTable,
        props: true
    }
]

//实例化路由组件
const router=new Router({
    mode:'history',
    routes
})

export default router

　　4、Home.vue文件内容：

　　5、HelloWorld.vue文件内容：

　　6、MySearch.vue文件内容：

　　7、MyTable.vue文件内容：

　　8、DisplayPara.vue文件内容：

　　显示结果：
　　1、主页面：

　　2、点击“搜索”出现页面：

　　3、点击“表格”出现页面：

　　注意点：
　　1、通过这个试验，清楚地看出index.html、App.vue、main.js之间的关系，以及组件之间的联系。
　　2、通过router-link和click方式触发路由并进行参数传递，这里的参数传递为对象，我没有使用递归来显示对象的所有，只是显示了根节点的参数名与参数值，其他的都是简单类型更加清楚明了。
　　3、上面的试验可以看出，vue设计是为了网页端应用的单页面展示，这样良好的无刷用户体验。
　　4、App.vue中至少应该有一个router-view，当然也可以有多个router-view，这样可以具体指定内容渲染到具体的router-view。
　　5、在路由器中的数据转发，寻路需要很多复杂的算法，vue中的路由也可以进行数据包的截取、分析处理再转发。
　　vue中的路由还有很多内容需要进一步的学习。