Vue路由

SPA （ single page App ） 单页面应用

1. 多页面应用 有多个html文件，通过a标签的连接联通各个页面 - 缺点 - 开发起来太冗余，编译、压缩很耗时间 - 页面之间的跳转速度太慢
2. 单页面应用 - 不需要刷新页面，因为它就是一个页面 - 这个页面内容在切换 - 单页面内容之间的切换要想实现我们就是用路由了 - 如今我们的app主要的开发形式就是spa

vue路由功能

1. 实现单页面的切换
2. 路由携带参数
3. 路由的导航守卫
4. 路由进行数据预载（进入组件前就请求获得数据）

vue-router 基础

1. vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？

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

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

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

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. 给路由一个路由展示区域
8. 如果是二级路由， 那么我们放在App组件中,用一个 router-view 的组件表示 html
9. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上
10. javascript const routes = [ { //我们要求这个路由的配置要放在路由表的最上方 path: '/', redirect: '/home' } ]
11. 业务： 错误路由匹配

   const routes = [          
       {   
           path: '/',      
            redirect: '/home'   //重定向  
   	 },        
          {      
           path: '/home',         
            component: Home      
              },         
            {        
            path: '/list',      
             component: List           
              },          
               {         
               path: '/detail',    
                 component: Detail  
               },       
                 {         
                 path: '/login',     
                   component: Login      
                  },     
                   {         
                   path: '/register',   
                    component: Register     
                      },         
                    {         
                     path: '/user',     
                      component: User      
               },      
                   {     
                  path: '/shopcar',      
                  component: Shopcar      
                  },       
                   {        
                   path: '/error',    
                       component: Error 
                     },         
                         {  
                           //这个就是错误路由匹配， vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个          
                            path: '**',        
                             redirect: '/error'  
                                 }      
                                ]        ```


10. vue路由模式的确定 mode     
   1.  如果你使用的是 hash , 那么a标签就可以了、     
   2.  如果你使用 history , 那么我们最好将a标签改成  router-link 这个组件      
       - router-link 这个组件 身上必须要有一个 to 属
7. 二级路由  
  ```javascript    
        const routes = [     
               {          
 path: '/shopcar',       
  component: Shopcar,    
   children: [           
       {              
       path: 'yyb', //不写  /    
     component: Yyb      
        }        
        ]     
    }    
      ] 

8. 命名路由 > 作用： 就是简写路径了

      {          
          path: '/shopcar',           
          component: Shopcar,   
           //子路由         
          children: [  
           {          
          path: 'yyb', // 容易犯错点  /yyb X    
         component: Yyb,     
          name: 'yyb' //命名路由    
          },         
         {    
          path: 'junge',        
          component: Junge  
         }    
           ]    
         },        ```