vue-router之前端路由的学习总结

Posted 2021-03-25 jcdxh

什么是路由

1. 路由就是通过互联网把信息从源地址传输到目的地的活动 --维基百科
2. 举例路由器：

• 路由器提供了两种机制：路由和转送
  • 路由是决定数据包从来源到目的地的路径
  • 转送将输入端的数据转移到合适的输出端
• 路由里有一个非常重要的概念叫路由表
  • 本质上就是一个映射表，决定了数据包的指向

开发中路由的几个阶段

1. 后端路由阶段

• URL发送到服务器，服务区进行正则匹配，经过处理，生成html或者数据（html,css,js），返回给前端，完成一个IO操作(input:输入，output：输出)

1. 前后端分离阶段

• 随着ajax出现，有了前后端分离，有点，后端专注于数据，前端专注将数据渲染到页面上，而且移动端出现后，仍然可以使用之前的后端API数据接口，只是进行不同的样式的渲染
• URL向静态服务器请求页面数据（多个页面），根据不同的URL请求并回应不同的页面

1. 单页面父应用阶段

• SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则
• 改变URL，但是页面不进行整体的刷新

路由的规则

1. • URL构成 :

• 协议://主机:端口/路径？查询（中文）
• scheme：//host：port/path？query#fragment

1. URL的hash

• URL的hash也就是‘锚点‘,本质上是改变window.laction的href属性

1. HTML5的history模式

• history接口是HTML5新增的，它有五种模式改变你URL而不断刷新页面.
• history.pushState({},‘‘,‘/foo‘)
• history.replaceState({},‘‘,‘/foo/bar‘)
• history.go(-1)/histroy(1)

认识vue-router

1. 目前前端三大流行的框架都有自己的路由实现

• Angular的ngRouter，React的ReactRouter ,Vue的vue-router

1. vue-router是Vue.js官方的路由插件，它和vue.js深度集成，适合用于构建单页项目应用
2. vue-router是基于路由和组件的

• 路由用于设定访问路径，将路径和组件映射起来
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

安装和使用Vue-router

1. npm install vue-router --save（在项目运行时依然需要）
2. 在工程模块中使用它（因为时插件，通过Vue.use()来安装路由功能）

• 第一步：导入路由对象(import Vue from ‘vue‘ +import VueRouter from ‘vue-router‘ )，并且调用Vue.use(VueRouter)
• 第二步：创建路由实例（index.js），并且传入路由映射配置
• 第三部: 在Vue实例中挂载创建的路由实例

1. 使用vue-router的步骤

• 第一步：创建路由组件
• 第二步：配置路由映射：组件和路径映射关系
• 第三部：使用路由：通过<router-link></router-link>和<router-view></router-view>

使用时细节

1. 路由的默认路径

• 如何可以让路径默认跳到首页，并且让<router-view>渲染首页的内容

•   多配置一个映射即可 
    {
      path:'/',
      redirect:'/home'
    }
    redirect时重新定向

1. router-link补充

• 使用router-link的to的时候，里面一定要用‘/‘开头
• tag属性，让其渲染成a之外的元素，<router-link to=‘/‘ tag=‘li‘>
• replace属性：replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
• active-class：当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称

1. HTML5的hist模式

• 如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可
• 在router实例中使用：mode:‘history‘

1. 路由通过代码跳转

•   App的vue中：
    <button @linkToHome>首页</button>
  
    methods:{
      linkToHome(){
        this.$router.push('./home')
      }
    }

1. 动态路由

•   {
      path:'user/:id',
      component:User
    }
    <div>
      <h2> {{ $route.params.id}} </h2>
    </div>
    <router-link to='/user/123'>用户<router-link>

  路由懒加载

1. 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块，当这个路由被访问到的时候在加载对应的组件

2.  const routes=[
        path:'/home'
        component:()=>import('../components/About')
      {
      }
    ]

3.  方式一: 结合Vue的异步组件和Webpack的代码分析.
      const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
   
    方式二: AMD写法
      const About = resolve => require(['../components/About.vue'], resolve);
   
    方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
      const Home = () => import('../components/Home.vue')
   
   

   路由嵌套

4. 比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.
   
5. 实现嵌套的两个步骤：

•   1. 创建对应的子组件，并且在路由映射中配置对应的子路由
  
      {
        path: '/home',
        component: Home,
        children:[
          {
            path:'news',
            component:HomeNews
          }
        ]
      }
    2.  在组件内部使用`<router-view>`标签

传递参数（params，query）

1. params类型

• 配置路由：/router
• 传递方式：在path后面跟上对应的值
• 传递后形成的路径：/routr/123，/router/abc

1. query的类型

• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/router？id=123,/router?id=abc

•   传递方式一：
    <router-link
      :to="{
        path:'/profile/'+123,    //params
        query:{name:'why',age:18}  //query
      }"
    ></router-link>
  
    传递方式二：
    methods：{
      toProfile(){
        this.$router.push({
          path:'/profile/'+123,    //params
          query:{name:'why',age:18}
        })
      },
    }
  

  获取参数

1. 获取参数通过$router对象获取

• 在使用了vue-router的应用中，路由对象会被注入到每个组件中,赋值为this.$route,并且当路由切换时，路由对象会被更新

1. $router和$route的区别

• $router为VueRouter的实例，想要导航到不同的URL，则使用$router.push方法
• $route为当前router跳转对象里面可以获取name，path，query，parmas

导航守卫

1. 什么是导航守卫？

• vue-router提供的导航守卫主要用来监听路由的进入和离开
• vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发

1. 使用导航守卫beforeEach来完成标题的修改

• 首先我们可以在钩子当中定义一些标题，可以利用meta来定义，在路由组件path和component下定义 meta{ title:‘关于‘}
• 其次，利用导航守卫，修改我们的标题

•   // to:即将进入目标的路由对象，from当前导航的即将要离开的对象，next调用了该方法，才能进入下一个钩子
    router.beforeEach(to,from,next) =>{
      window.document.title = to.meta.title
      next()
    }

1. 导航守卫补充

• 1.如果是后置钩子（after），不需要主动调用next()函数
• 2.上面使用的是全局守卫，其实还有路由独享的守卫，组件内的守卫
• 3.其它可以去官方进行学习

keep-alive遇见vue-router

• keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
• 它们有两个非常重要的属性:
• include - 字符串或正则表达，只有匹配的组件会被缓存

• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

• router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

  •     <keep-alive exclude="Profile">
          <router-view></router-view>
        </keep-alive>