路由 vue-router

SPA

• （ single page App ） 单页面应用
• 优点
  • 不需要刷新页面，因为它就是一个页面
  • 这个页面内容在切换
  • 单页面内容之间的切换要想实现我们就是用路由了
  • 如今我们的app、后台管理系统 主要的开发形式就是spa

多页面应用

• 有多个html文件，通过a标签的连接联通各个页面
• 缺点
  • 开发起来太冗余，编译、压缩很耗时间
  • 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏

  ---

vue 路由的mode(模式)有三种

• hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home
• history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
• abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】
• hash/history 常用于浏览器端，abstract用于服务端

---

路由的使用步骤

1. 安装 vue-router $yarn add vue-router
2. 在src目录下创建一个router目录， 里面创建一个index.js文件 ， 这个目录就是router的模块
3. 引入第三方的依赖包, 并注册路由

import Vue from 'vue'
  import VueRouter from 'vue-router'

  Vue.use( VueRouter ) //使用vue-router这个第三方插件

import这个关键字要放在整个文件的上层
4. 创建一个router对象实例，并且创建路由表

const routes = [ 
    {
      path: '/home',
      component: Home
    }//每一个对象就是一个路由
  ]
  const router = new VueRouter({
    routes//路由表  必写的
  })

5. 导出router实例 export default router
6. 入口文件main.js中引入路由实例 router , 然后在根实例中注册

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

7. 给路由一个路由展示区域
   • 如果是一级路由， 那么我们放在App组件中,用一个 router-view 的组件表示
8. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上

const routes = [
      { //我们要求这个路由的配置要放在路由表的最上方
        path: '/',
        redirect: '/home'
      }
    ]

9.错误路由匹配

const routes = [
  {
    path: '/',
    redirect: '/home'   //重定向
  },
  {
    path: '/home',
    component: Home
  },
   {  //这个就是错误路由匹配，
   vue规定这个必须放在最下面，
   它必须将上面的路由全找一遍，
   找不到才用当前这个
    path: '*',
    redirect: '/error'
  }
]

10. vue路由模式的确定 mode
    • 如果使用的是 hash , 那么a标签就可以
    • 如果使用 history , 那么最好将a标签改成 router-link 这个组件
      • router-link 这个组件 身上必须要有一个 to 属性
      • router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存

二级路由

 const routes = [
          {
            path: '/shopcar',
            component: Shopcar,
            children: [
              {
                path: 'shopcarsub', //不写 斜杠 /
                component: Shopcarsub
              }
            ]
          }
        ]

1. 在对应的一级路由的组件中书写 路由展示区域
2. 命名路由
   • 作用：就是简写路径

 {
        path: '/shopcar',
        component: Shopcar,
        //子路由 
        children: [
          { 
            path: 'shopcarsub', // 不写斜杠/
            component: Shopcarsub,
            name: 'shopcarsub' //命名路由
          },
          {
            path: 'login',
            component: Login
          }
        ]
      },

3. 使用： 单项数据绑定to属性

      <router-link :to = "{name:'shopcarsub'}"/>