vue-router vue路由模块

SPA 单页面应用 

     所有功能都在一个页面上去（页面加载对应的HTML，css，js）

     每个功能都由模块构成

    用户操作的是不同的模块，页不会出现重新加载或跳转的请况

vue-router 路由模块

   作用：为SPA 实现页面的切换    控制vue组件文件的跳转

   原理   通过不同路径的hash值    控制显示哪些模块

简单的路由

   使用：

         1：安装  ：npm i vue-router

         2：在全局中导入并注册

         3： src建立router文件夹 index文件用于配置路由

使用脚手架会自动完成以上动作

配置路由

import 组件名 from ''组件在文件中的路径'

const routes = [
 // 路由的重定向
   {  path：‘ 用户访问的页面的hash   如果要访问是不存在的页面  写*   
      redirect：‘用户跳转的页面的hash’ },
 // 路由配置
  {
    path: '/hash值',  // 对应组件的路径 当浏览器上的 /#/ 这个位置为这个值时显示对应的组件
    name: 'login',    // 对应组件的名字
    component: () => import(/* webpackChunkName: "layout" */ '组件在文件中的路径')
     // 导入组件 (懒加载方法)
    component: 组件名
     // 导入组件  (先导入在设置方法)

     children:[    // 配置当前路由下的子路由
        { path: '/hash值',  
          name: 'login',   
    component: () => import(/* webpackChunkName: "layout" */ '组件在文件中的路径')
      }]
  }]

路由的导入方式具体作用看这里

初始化路由 路由模式

const router = new VueRouter({
  routes,
  mode: 'hash' 
})

 mode :定义路由模式 

     hash模式  路径中带有#  兼容性好

       hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash           后刷新, 也不会有问题

        原理： hashChange

     history模式  路径中不带有# 兼容性差

     依赖于Html5 的 history api

      刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404

      原理： popState, history.pushState()

 history模式刷新找不到页面问题处理

发布时由后端解决

路由跳转的实现

 链接式导航

   使用  <router-link to=''> 标签进行跳转  to对应路由的hash值  子路由要在前加父路由

               在页面中 会被渲染为一个 a 标签

   页面会渲染到 <router-view /> 上   

 如果使用组件库可能会使用组件库的跳转方式 

      参数的传递   

           query形式传参    #/hash值 ? 属性1=值1&属性2=值2

           parmas 传参   #/hash值 /参数1/参数2     

           注意如果使用这种形式  要配置路由 path: '/hash值'/:参数名1/参数名2

编程式导航

     this.$router.push('路径 '   或    { path:'路径'  或  name  :   路由规则中的name属性值})

     this.$router.back()   返回上一个页面

     this.$router.replace()   用法与push相同   跳转时会覆盖当前的路由不能返回上一次的页面

  参数的传递  

         query形式传参    #/hash值 ? 属性1=值1&属性2=值2  或  query:{ 参数:值}

          parmas 传参   #/hash值 /参数1/参数2   

路由参数的获取

 通过  this.$route  拿到参数     同一页面下的所有组件都可以获取这个页面路由的参数

    

路由组件的缓存

 路由的跳转，会导致组件的销毁和重建

如果不想组件被销毁

通过keep-alive组件来进行对路由组件进行缓存，

就是在路由跳转时，不去删除组件，而是将组件留在内存中

<keep-alive :include="['组件名1', '组件名2']">
	  <router-view />   // 路由渲染的标签
</keep-alive>

:include 属性 控制要缓存的组件

:exclude属性 不被缓存的组件

组件被缓存后会由两个生命周期钩子函数

activated () {}         //  组件被激活

deactivated () {}     // 组件被缓存