单页应用的优缺点及路由配置

单页应用的优缺点
优点：
无刷新体验,提升了用户体验；
完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加规范化，便于修改和调整；
API 共享，如果你的服务是多端的（浏览器端、Android、iOS、微信等），单页应用的模式便于你在多个端共用 API，可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端，只受到业务数据模型影响的 API，更容易稳定下来，便于提供鲁棒的服务；
组件共享，在某些对性能体验要求不高的场景，或者产品处于快速试错阶段，借助于一些技术（Hybrid、React Native），可以在多端共享组件，便于产品的快速迭代，节约资源。
缺点：
首次加载大量资源，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长；
较高的前端开发门槛，MVC 前置，对前端工程师的要求提高了，不再是『切切图，画画页面这么简单』；同时工作量也会增加数倍，开发这类应用前端工程师的数量往往多于后端；
不利于 SEO，单页页面，数据在前端渲染，就意味着没有 SEO，或者需要使用变通的方案。



vue-router.js是Vue.js官方的路由插件用于构建单页面应用。
vue的单页应用是基于路由和组件的。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单面应用中，则是路径之间的切换，也就是组件的切换。

router-link标签：跳转的链接，to=""是必须的属性，双引号中的内容是我们接下来在JS文件中定义的路由path。
router-view标签：展示我们匹配到的组件的区域。
一、使用路由
首先在目录下创建components文件夹，然后再创建index.vue和hello.vue文件
修改index.js文件
//引入index.vue和hello.vue组件
import homepage from '@/components/homepage'
import python from '@/components/pythonpage'
//定义路由
export default new Router({
  routes: [
    {
      path: '/',
      name: python,
      component: python
    },
    {
      path:'/home',
      name:homepage,
      component:homepage
    },
  ]
})
//main.js创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

3.修改App.vue
<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
  <router-link to="/">python</router-link>
  <router-link to="/home">home</router-link>
    <router-view/>
  </div>
</template>

<router-link>标签属性
//to属性 string|object
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

//replace属性 true|false 不留下 history 记录。
<router-link to="home" replace>Home</router-link>

//append属性 true|false 追加路径
<router-link to="home" append >Home</router-link>

//tag属性 string 设置渲染标签
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>