Vue-router学习笔记

一、Vue-router之集成

1. 功能

处理前端路由的功能

2. 安装

npm install vue-router --save

3. 集成

在项目中新建两个文件（router文件夹下）

index.js    // 路由配置
routes.js   // 路由内容

3.1 routes.js

存放路由映射关系，为一个数组

    import Component from '@/components/Component.vue'
    import Login from '@/components/Login.vue'

    export default [
      {
        path: '/component',  // 路径
        component: Component // 组件
      },
      {
        path: '/login',
        component: Login
      }
    ]

3.2 index.js

存放路由配置

  • 3.2.1 方式一：返回一个Router对象，全局import时皆为统一对象，不会自动释放，所以在使用服务端渲染时会导致内存溢出
    import Router from 'vue-router'
    import routes from './routes'
    // 使用Router
    Vue.use(Router)

    export default new Router({
      routes  // 路由配置
    })
  • 3.2.2 方式二：返回一个方法，每次import创建一个新的Router
    import Router from 'vue-router'
    import routes from './routes'
    // 使用Router
    Vue.use(Router)

    export default () => {
      return new Router({
        routes  // 路由配置
      })
    }

3.3 main.js

    import createRouter from './router'

    // 使用导入的createRouter方法创建一个router
    const router = createRouter()

    // 将router放入new Vue的配置项中
    new Vue({
      router: router,
    })

3.4 App.vue

    <template>
      <!-- <router-view />的位置显示路由对应的内容 -->
      <router-view />
    </template>

二、Vue-router之配置

1. routes.js

path

路由路径

component

组件

redirect

路由重定向

    import Component from '@/components/Component.vue'
    import Login from '@/components/Login.vue'


    export default [
      {
        path: '/',
        redirect: '/component'  // 将路由重定向
      },
      {
        path: '/component',  // 路径
        component: Component // 组件
      },
      {
        path: '/login',
        component: Login
      }
    ]

2. index.js

routes

路由配置

mode

路由模式，默认哈希路由，带#，history模式无#。

base

基路径

linkActiveClass linkExactActiveClass

<router-link>会带有这两个class，全局配置链接被激活时所展示的样式。

  • linkExactActiveClass：路径完全匹配
  • linkActiveClass：子集即可

scrollBehavior

    scrollBehavior (to, from, savedPosition) {}
  • to：路由跳转过程中要前往的路由
  • from：路由跳转过程中来自的路由
    • 注：to与from都是完整的路由对象
  • savedPosition：记录滚动条的位置

parseQuery stringifyQuery

?a=xxx&b=yyy
对象与字符串互相转换

fullback

浏览器不支持history会自动转为hash形式

    import Router from 'vue-router'
    import routes from './routes'
    // 使用Router
    Vue.use(Router)

    export default () => {
      return new Router({
        routes,           // 路由配置
        mode: 'history',  // 路由模式
        base: '/base/',   // 路由前会默认加上‘/base/’
        linkActiveClass: 'active-link',
        linkExactActiveClass: 'exact-active-link',
        // 记录滚动行为
        scrollBehavior (to, from, savedPosition) {
          if (savedPosition) {
            return savedPosition
          } else {
            return { x: 0, y: 0}
          }
        },
        // 字符串转对象
        parseQuery (query) {},
        // 对象转字符串
        stringifyQuery (obj) {},
        fullback: true
      })
    }

三、Vue-router之路由参数传递

1. routes.js

name

路由名字

    <template>
      <router-link :to="{name: 'component'}">app</router-link>
    </template>

meta

元信息

children

子路由，在该组件之下的<router-view />之中显示，嵌套路由

    import Component from '@/components/Component.vue'
    import Login from '@/components/Login.vue'

    export default [
      {
        path: '/component',     // 路径
        component: Component,   // 组件
        name: 'component',      // 名字
        meta: {                 // 元信息
          title: 'this is app',
          description: 'asdasd'
        },
        children: [             // 子路由
          {
            path: 'test',
            component: Login
          }
        ]
      },
      {
        path: '/login',
        component: Login
      }
    ]

2. transition

路由过渡动画

  • Component
    <template>
      <transition name="fade">
        <router-view />
      </transition>
    </template>
  • Style
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-to {
      opacity: 0
    }

3. 参数

可从路由中获取信息
访问路径：/app/123?a=123&b=456

3.1 方法1

  • routes.js
    {
      path: '/app/:id',   // /app/xxx
      component: Login
    }
  • Component
    export default {
      mounted () {
        this.$route         // 路由的全部信息
        this.$route.params  // {id:"123"}
        this.$route.query   // {a:"123", b:"456"}
      }
    }

3.2 方法2

  • routes.js
    {
      path: '/app/:id',   // /app/xxx
      props: true         // 将id作为props传入
      component: Login
    }
  • Component
    export default {
      props: ['id']
      mounted () {
        console.log(this.id)  // 123
      }
    }
props的其他用法
  • routes.js
  {
    path: '/app/:id',   // /app/xxx
    // 自定义值
    props: {
      id: '456'
    },
    // 自定义方法
    props: (route) => (
      {
        id: route.query.b
      }
    ),
    component: Login
  }

四、Vue-router之导航守卫

1. 命名视图

解决同一组件下两个<router-view />显示不同内容

  • Component
    <template>
      <router-view />
      <router-view name="a"/>   // 给router-view一个名字
    </template>
  • routes.js
    component改为components
    {
      path: '/app',
      components: {
        default: Component,
        a: Login
      }
    }

2. 导航守卫

2.1 全局导航守卫 main.js

    const router = createRouter()
  • to：前往路由
  • from：来源路由
  • next：方法，执行下一步
    router.beforeEach((to, from, next) => {
      console.log('before each invoked');
      next()
    })

    router.beforeResolve((to, from, next) => {
      console.log('before resolve invoked');
      next()
    })

    router.afterEach((to, from) => {
      console.log('after each invoked')
    })
  • 执行顺序
    beforeEach => beforeResolve => afterEach
  • beforeEach
    • 进行数据校验 
      router.beforeEach((to, from, next) => {
  // 跳转路径为'/login'时才进行跳转
  if (to.fullPath == '/login') {
    next()
  }
})
    • next的写法，和vue-router上定义的props是一样的 
      next('/login')
next({path: '/login'})
next({name: 'Login'})
2.2 路由配置中 routes.js
    {
      path: '/component',
      component: Component,
      beforeEnter (to, from, next) {
        console.log('app route before enter')
        next()
      }
    }
  • 执行顺序
    beforeEach => beforeEnter => beforeResolve => afterEach
2.3 组件内部 Component.Vue
    export default {
      beforeRouteEnter (to, from, next) {
        console.log('todo before enter')
        next()
      },
      beforeRouteUpdate (to, from, next) {
        console.log('todo update enter')
        next()
      },
      beforeRouteLeave (to, from, next) {
        console.log('todo leave enter')
        next()
      },
    }
  • 执行顺序
    beforeRouteLeave（上一路由） => beforeEach => beforeEnter => beforeRouteEnter / beforeRouteUpdate => beforeResolve => afterEach
    • beforeRouteUpdate
      同一个组件在不同路由下显示时触发，mounted()不会触发，需要使用beforeRouteUpdate
  • 在beforeRouteEnter中从this中获取数据 
      beforeRouteEnter (to, from, next) {
    console.log('todo before enter')
    next(vm => {
      console.log(vm);  // vm相当于this
    })
  },
  • beforeRouteLeave应用场景
    控制页面离开，例如当前组件表单做了较大修改，在离开前可询问是否确认离开 
    beforeRouteLeave (to, from, next) {
  console.log('todo leave enter')
  if (global.confirm('are you sure?')) {
    next()
  }
},

3. 异步组件

将component修改为一个方法，即可在访问某个组件时只加载相应代码，而不是一开始就加载全部代码，可提高首页访问速度

    {
      path: '/component',
      component: () => import('/components/Component.vue')
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。