vue 路由

CccccJJJ
127 阅读4分钟

vue-route懒加载如何实现

两种方式

    非懒加载
    import List from '/@/compnoent/list.vue'
    const router = new Router({
        routes:[
            {
                path:'/list',
                component:List
            }
        ]
    })
    懒加载
    // 常用方法一：使用箭头函数+import动态加载
    const List = () => import('@/component/list.vue')
    cosnt router = new VueRouter({
        routes:[
            { 
                path:'/list',
                component:List
            }
        ]
    })
    // 方法二 箭头函数+require()
    const router = new VueRouter({
        routes:[
            {
                path:'',
                component: resolve => require(['@/component/list'],resolve)
            }
        ]
    })
    // 方法三 webpack的require.ensure，能实现按需加载。这种情况会加载路由指定相同的chunkName，合并成打包一个js文件
    // r就是resolve
        const List = r => require.ensure([], () => r(require('@/components/list')), 'list');
    // 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载 
    const router = new Router({
      routes: [
          {
              path: '/list',
              component: List,
              name: 'list'
          }
        ]
    }))

$route 和 $router的区别

关于vue路由之间传值，讲讲$route与$router的区别

  1. $router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的一个梳理对象，对象中是一个全局的对象，包含所有的路由，还有许多关键的对象和属性
    history对象来说；
    $router.push({path:'home'}),本质是向history栈中添加一个路由，外面看起来是切换路由，实际是添加history记录
    $router.replace({path:'home'})，//替代路由，没有历史记录
    $router.push('/login'),跳转到指定路由
  1. $route是一个跳转的路由对象，每一个路由都会有$route对象，是一个局部的对象，可以获取对应的name，path,params,query等
    `$route.path` 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews  
    `$route.params` 对象，含路由有中的动态片段和全匹配的键值，不会拼接到路由的url后面  
    `$route.query` 对象，包含路由中查询参数的键值对，会拼接到路由url后面
    `$route.matched`数组，包含当前匹配的路径中所包含的所有片段和对象的配置参数对象
    `$route.name`当前路由的名字，如果没有使用具体路径，则名字为空

总结：

    $route是路由信息对象，包括path、params、hash、query、fullpath、matched、name等路由信息参数
    $router是路由实例，包括路由的跳转方式、钩子函数

路由的hash和history模式

vue-router有两种模式：hash和history。

hash模式

简介：是开发中默认的模式，url带着一个#。
特点：不会出现在HTTP请求中，对后端无任何影响。hash路由被称为是前端路由，成为SPA应用的标配
原理:就是onhashchange()事件
    window.onhashchange = function(event){
        console.log(event.oldURL,event.newURL)
    }

这种好处就是页面的hash发生变化时，不用向后端发生请求，window会监听事件的改变，并按规则加载相应的代码。而且，hash值每次的变化都会被浏览器记录，浏览器就能前进和后退。虽然没有请求后端，但页面hash值和对应的URL联系起来

history模式

简介：URL无#,使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接受这个请求，并解释这个URL，然后做出相对应的逻辑处理。
特点：当使用history模式时，URL就像这样：abc.com/user/id。相比hash模式更加好看。但是，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
API:历史状态和修改历史状态

修改历史状态

包括H5中的pushState()和replaceState()方法，这两种适用于浏览器的历史记录栈，提供了对历史记录修改的功能。虽然修改了URL，但浏览器不会立即向后端发起请求，既想改变URL但又不刷新页面的效果，就用到这两个API

切换历史状态

forward()、go()、back()三个方法，对应浏览器中前进、后退，跳转操作
缺点是如果没有对应的路由或资源，就会显示404。

两种模式对比 调用 history.pushState() 相比于直接修改 hash，存在以下优势:

  • pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；
  • pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
  • pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；
  • pushState() 可额外设置 title 属性供后续使用。
  • hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误；history模式下，前端的url必须和实际向后端发起请求的url一致，如果没有对用的路由处理，将返回404错误。

hash模式和history模式都有各自的优势和缺陷，还是要根据实际情况选择性的使用。

avatar
文章
阅读
粉丝