vue-router路由基础

Router 路由相关

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. 路由的使用步骤

   1. 安装 vue-router yarn add vue-router -S（yarn默认的就是生产环境的安装，可以不写大S）
   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，//路由表  必写的
          mode:'history', //history模式，默认是hash模式
          linkActiveClass: 'active', // 给当前路由的样式
          moudles:{}//路由分块
        })
      

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

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

   7. 给路由一个路由展示区域
      1. 如果是一级路由， 那么我们放在App.vue组件中,用一个 router-view 的组件表示

      <router-view></router-view>
      

   8. 当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上

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

   9. 业务： 错误路由匹配，

          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
   11. 如果你使用的是 hash , 那么a标签就可以了、
   12. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件

     - router-link 这个组件 身上必须要有一个 to 属性
         - router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存
   

   11. 二级路由

   ```javascript
       const routes = [
         {
           path: '/shopcar',
           component: Shopcar,
           children: [
             {
               path: 'yyb', //不写  /
               component: Yyb
             }
           ]
         }
       ]
   ```
   - 注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域
   

   12. 命名路由

       作用： 就是简写路径了

         {
             path: '/shopcar/:id',
             component: Shopcar,
             //子路由 
             children: [
               { 
                 path: 'home', // 容易犯错点  
                 component: Home,
                 name: 'house' //命名路由
               },
               {
                 path: 'aa',
                 component: Aa
               }
             ]
             
           },
       

       • 使用： 路由传参时需要对应的路由表配合，比如上面的shopcar路由，后面的id

         1、简单路由跳转
         <router-link to="/home"></router-link>
         2、写成简单对象形式
         <router-link :to = "{path: '/home'}"></router-link>
         3、路由参数，name为跳转路径，params为路由传参，param如果有多个可以写成对象
         <router-link :to = "{name: 'home',params: param}"></router-link>