vue-router

vue-router

• SPA(单页面应用)
  • 就是只有一个HTML文件
  • 优点：
    • 不需要刷新页面，因为只有一个页面
    • 只有一个页面的内容在切换
    • 要想实现单页面内容的切换就要用路由了
    • 如今我们的app、后台管理系统主要开发形式就是SPA
• 多页面应用(有多个HTML文件，用a标签连通各个页面)
  • 缺点：
    • 开发起来太冗余、编译、压缩很耗时间
    • 页面之间跳转速度太慢，这是会出现严重白屏

1. vue路由mode(模式)有几种：
   1. hash：使用URL hash 值来作路由。支持所用浏览器，包括不支持HTML5 History Api 的浏览器
      地址写法：#/home
   2. history：依赖 HTML5 History Api 和服务器配置。【需要后端支持】
      地址写法：/home
   3. abstract：支持所用的JavaScript运行环境，如Node.js服务器端。如果发现没有浏览器的API，路由会自动强制进入这个模式。【这个模式不常用】
   4. hash/history常用于浏览器端 ；abstract常用于服务端
2. 路由的使用步骤

   1. 先安装$ yarn add vue-router

   2. 在src目录里建一个router文件夹–>在router文件夹下建一个index.js文件【这是项目路由的配置文件】

   3. 在index.js文件中配置路由

      	/* 这是项目路由的配置文件 */
      //1. 引入需要的模块
      
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      
      import Home from '../pages/home'
      
      /* 在vue中插件的引入，要想和vue.js融合那我们必须使用vue.use(插件名称) */
      
      //2. 激活插件
      Vue.use(VueRouter)
      
      // 3. 得到router对象
      // const router = new VueRouter(optisons配置项)
      
      const router = new VueRouter({
        // routes: []
        routes: [
          //{}每一个对象就是一个路由配置
          {
            path: '/home', //路由路径
            component: Home //路由路径对应的组件
          }
        ]
      })
      
      //4. 导出router模块
      export default router
      

      在src中创建pages文件【这个文件下是放组件的】，在pages下创建home文件夹【首页】，在home下创建index.vue文件【这是组件，里面写template模板】

   4. 在main.js入口文件中使用router

      	import Vue from 'vue'
      	import App from './App.vue'
      	
      	//在main.js入口文件中使用router
      	import router from './router'
      	
      	Vue.config.productionTip = false
      	
      	new Vue({
      	  router,//这是注入路由，注入路由的目的是为了让项目中的每一个组件都可以使用路由的属性
      	  render: h => h(App),
      	}).$mount('#app')
      

   5. 错误路由匹配写法

      //错误路由，放在路由表的最下面
      {
        path: '*',
        component: Error
      }
      

   6. 路由重定向配置

      	{
        path: '/',
        redirect: '/home' //重定向
      },
      

   7. 在src下创建layout文件夹【这里写整个页面的布局】，在layout下创建index.vue【写导航、路由展示区域】

      <template>
        <div>
          <!-- 导航 -->
          <!-- 路由展示区域  router-view这是内置组件 -->
          <router-view></router-view>
        </div>
      </template>
      

   8. 在App.vue组件中吧layout组件引入

   9. 实现路由跳转用router-link,router-link标签中有两个属性
      - to="“属性：是写路径的例如：to=”/home"
      - active-class = ““属性：是路由激活例如：active-class = “active”
      - keep-alive:加这个是缓存（切换更快）
      - tag=”” :这个属性中写的是什么HTML中就是将router-link渲染成什么标签。例如：tag=“li”(就是将router-link渲染成li标签)

      <router-link to = "/home" active-class = "active" class="nav-item nav-link" >首页</router-link>
      <router-link to = "/category" active-class = "active" class="nav-item nav-link" >分类</router-link>
      <router-link to = "/shopcar" active-class = "active" class="nav-item nav-link" >购物车</router-link>
      <router-link to = "/mine" active-class = "active" class="nav-item nav-link" >我的</router-link>
      

3. 路由懒加载
   参考官网：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
   1. . 路由的懒加载是通过vue的异步组件和webpack的代码分割功能来完成的
   2. 代码：

      /* 这是项目路由的配置文件 */
      //1. 引入需要的模块
      
      import Vue from 'vue'
      import VueRouter from 'vue-router'
      
      //这是常规的引入【没有懒加载】
      // import Home from '../pages/home'
      /* 路由懒加载
         路由的懒加载是通过vue的异步组件和webpack的代码分割功能来完成的
      */
      //来源于vue官网中的vueRouter中的懒加载【下面代码直接复制官网的】
      const Home = () => import(/* webpackChunkName: "group-foo" */ '../pages/home')
      
      
      /* 在vue中插件的引入，要想和vue.js融合那我们必须使用vue.use(插件名称) */
      
      //2. 激活插件
      Vue.use(VueRouter)
      
      // 3. 得到router对象
      // const router = new VueRouter(optisons配置项)
      
      const router = new VueRouter({
        // routes: []
        routes: [
          //{}每一个对象就是一个路由配置
          {
            path: '/home', //路由路径
            component: Home //路由路径对应的组件
          }
        ]
      })
      
      //4. 导出router模块
      export default router
      

4. 二级路由
   1. 找到pages文件夹下需要配二级路由的文件（例category）下创建二级路由的组件
   2. 在到category文件夹下的index.vue下加一个路由展示区域router-view

   		<template>
     <div>
       分类
       <hr>
       <nav class="nav nav-pills nav-fill">
         <router-link to = "/home/computer" active-class = "active" class="nav-item nav-link" >电脑</router-link>
         <router-link to = "/category/ipad" active-class = "active" class="nav-item nav-link" >ipad</router-link>
         <router-link to = "/shopcar/phone" active-class = "active" class="nav-item nav-link" >手机</router-link>
       </nav>
       <!-- 二级路由展示区域 -->
   
       <router-view></router-view>
     </div>
   </template>
   

   3. 在router文件夹下的index.js中路由配置写法（子路由不需要写斜杠）

   path: '/category',
     component: Category,
     children: [
       {
         path: 'computer',
         component: Computer
       },
       {
         path: 'ipad',
         component: Ipad
       },
       {
         path: 'phone',
         component: Phone
       }
     ]
   

动态路由（重点）

1. 如何引入组件库
   1. vue常用的组件库
      • pc
        • iview
        • element-ui
        • ant design vue
      • app
        • Mint-ui
        • vant
   2. 通过官方文档安装好后
   3. 在main.js入口文件引入组件库