• vue路由高级语法糖


    1.当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active.
    模板中可以用{{$route.params.xxx取到路由参数}}或者{{$route.query取到参数}}或者{{$route.hash取到hash}}
    实例中(js)可用:this.$route.params.xxx/this.$route.query.xxx取到路由参数;
    2.通过$router 访问路由实例;
    3.路由带参数:
    const userId = 123
    router.push({ name: 'user', params: { userId }}) // -> /user/123
    router.push({ path: `/user/${userId}` }) // -> /user/123
    router.push({ path: 'register', query: { plan: 'private' }})
    // 这里的 params 不生效
    router.push({ path: '/user', params: { userId }}) // -> /user
    4.路由历史记录:
    window.history.go(n)
    router.go(n)
    History.back()       //历史记录中的上一页
    History.forward()    //历史记录中的下一页
    在window.history里新增一个历史记录点  存储当前历史记录点
    //当前的url为:http://qianduanblog.com/index.html
    var json={time:new Date().getTime()};
    window.history.pushState()三个参数:
    //1.状态对象:记录历史记录点的额外对象,可以为空
    //2.页面标题:目前所有浏览器都不支持
    //3.可选的url:浏览器不会检查url是否存在,只改变url,url必须同域,不能跨域
    window.history.pushState(json,"","http://qianduanblog.com/post-1.html");
    执行了pushState方法后,页面的url地址为http://qianduanblog.com/post-1.html。
    替换当前历史记录点:window.history.replaceState()不会在window.history里新增历史记录点
    其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的;
    监听历史记录点:直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange事件
    通过window.onpopstate来监听url的变化;并且可以获取存储在该历史记录点的状态对象;
    //当前的url为:http://qianduanblog.com/post-1.html
    window.onpopstate=function(){
        // 获得存储在该历史记录点的json对象
        var json=window.history.state;
        //点击一次回退到:http://qianduanblog.com/index.html
        //获得的json为null
        //再点击一次前进到:http://qianduanblog.com/post-1.html
        //获得json为{time:1369647895656}
    }
    注意:js脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
    5.路由重定向
    { path: '/a', redirect: { name: 'foo' }}  //重定向的目标也可以是一个命名的路由
    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载;
    6.路由元信息:
    const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          children: [
            {
              path: 'bar',
              component: Bar,
              meta: { requiresAuth: true }
            }
          ]
        }
      ]
    })
    对应:
    router.beforeEach((to, from, next) => {
      if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!auth.loggedIn()) {
          next({
            path: '/login',
            query: { redirect: to.fullPath }
          })
        } else {
          next()
        }
      } else {
        next() // 确保一定要调用 next()
      }
    })
    7.滚动行为:当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置;
    注意: 这个功能只在支持 history.pushState 的浏览器中可用;(也就是mode: 'history'
    const router = new VueRouter({
      routes: [...],
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
        // return 期望滚动到哪个的位置
      }
    })
    对于所有路由导航,简单地让页面滚动到顶部;
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    }
    如果你要模拟『滚动到锚点』的行为:
    scrollBehavior (to, from, savedPosition) {
      if (to.hash) {
        return {
          selector: to.hash
        }
      }
    }
    异步滚动:
    scrollBehavior (to, from, savedPosition) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ x: 0, y: 0 })
        }, 500)
      })
    }
    8.Router 构造配置:
    mode:可选值: "hash(默认值浏览器环境)" | "history" | "abstract(默认值Node.js 环境)",
    base:"/",(默认值)应用的基路径
    linkActiveClass:"router-link-active"(默认值),
    linkExactActiveClass(2.5.0+):"router-link-exact-active"(默认值),
    scrollBehavior:滚动行为function;
    parseQuery / stringifyQuery:提供自定义查询字符串的解析/反解析函数。覆盖默认行为function;
    fallback(2.6.0+):当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
    类型: boolean,在 IE9 中,设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。
    9.路由信息对象
    $route.path:字符串,对应当前路由的路径,
    $route.params:一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象,
    $route.query:一个 key/value 对象,表示 URL 查询参数,如果没有查询参数,则是个空对象。
    $route.hash:当前路由的 hash 值 (带 #) ,如果没有 hash 值,则为空字符串。
    $route.fullPath:string类型完成解析后的 URL,包含查询参数和 hash 的完整路径。
    $route.matched:一个数组,包含当前路由的所有嵌套路径片段的路由记录。
    $route.name:当前路由的名称,如果有的话。(查看命名路由)
    $route.redirectedFrom:如果存在重定向,即为重定向来源的路由的名字。
    在 HTML5 history 模式下,router-link 会守卫点击事件,让浏览器不再重新加载页面。
    当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
    10.导航守卫:
    一、全局守卫
    const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
      // ...
    })
    to: Route: 即将要进入的目标 路由对象
    from: Route: 当前导航正要离开的路由
    next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
    next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
    next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
    next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
    next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
    确保要调用 next 方法,否则钩子就不会被 resolved。
    二、全局后置钩子 router.afterEach((to, from)
    => { // ... }) 二、路由独享的守卫 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) 三、组件内的守卫 const Foo = { template: `...`, beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this`,你可以通过传一个回调给 next来访问组件实例 // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } } 11.路由懒加载 import page1 from './routes/page1.vue' const page2 = r => require.ensure([], () => r(require('./routes/page2.vue'))) const routes = [ { path: '/main', component: page1 }, { path: '/other', component: page2 } ] //这两条路由被打包在相同的块中,访问任一路由都会延迟加载该路由组件 //有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。(借助WebPack的require.ensure()) 语法:require.ensure(dependencies: String[], callback: function(require), chunkName: String) const page1= r => require.ensure([], () => r(require('./routes/page1.vue')), 'big-pages') const page2 = r => require.ensure([], () => r(require('./routes/page2.vue')), 'big-pages') 写法二: export default new Router({ routes: [ { path: '/', component: resolve => require(['components/Hello.vue'], resolve) }, { path: '/about', component: resolve => require(['components/About.vue'], resolve) } ] }) 12.vue组件的按需加载(2种方式) 组件里面: components: { bview: resolve => {require(["./b.vue"], resolve);} }, 模板里面: <component :is="current" :data="myData" ></component> data() { return { current: "", myData:"", show:false } }, methods: { changeComponents(view){ if(view=='aview'){ this.myData='a1000'; } else{ this.myData='b1000'; } this.current=view; } }
  • 相关阅读:
    MongoDB的安装和常用命令
    mysql安装、使用与遇见的问题汇总
    devicePixelRatio,Viewport,移动端适配
    javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法
    正则表达式
    npm 常用命令
    Markdown 基本语法
    mysql忘记root密码
    mysql5.7.12/13在安装新实例时报错:InnoDB: auto-extending data file ./ibdata1 is of a different size 640 pages (rounded down to MB) than specified in the .cnf file: initial 768 pages, max 0 (relevant if non-zero
    mysqld数据位于a盘,执行delete from table, 发现另外2个盘磁盘使用率接近100%,而a盘的使用率反而很低,y??
  • 原文地址:https://www.cnblogs.com/lhl66/p/8665042.html
Copyright © 2020-2023  润新知