发表于

懒加载

– 把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件。

  • Vue异步组件

    1
    2
    3
    4
    5
    6
    components: {
          headerNav: (resolve) => { //副组件名字
            setTimeout(() => {
              resolve(Header) //主组件名字
            },1000)
          }

  • webpack的代码分割功能

    1
    2
    3
    require.ensure代码分块
             require.ensure(依赖,回调函数,[chunk名字])
     import函数

发表于

  • 导航钩子函数

    -- 导航发生变化时，导航钩子主要用来拦截导航，让它来完成跳转或取消
  • 执行导航钩子函数的位置
    • router全局
    • 单个路由
    • 组件中

  • 钩子函数

    • router实例上: beforeEach afterEach
    • 单个路由中： beforeEnter

    • 组件内的钩子: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

      • 单个组件内的钩子函数怎么访问data数据,在钩子函数内传入回调函数，函数内传入vm参数，通过vm.data访问
        ```
        在单个组件内

        let flags = {
        project: ‘我的项目’,
        workbench: ‘工作台’,
        doc: ‘文档’
        },

        export dafault{
        data(){

        flag: ''

        }
        },
        beforeRouteEnter(to,from,next){
        next((vm) => {

        vm.flag = flags[to.path.slice(1)]

        })
        }

  • 钩子函数内的接收参数

    • to: 要进入的目标路由对象 到哪里去
    • from：正要离开的导航路由对象 从哪里来
    • next：用来决定跳转或者取消导航

钩子函数

  • 在特定的时间点提供给我们执行代码的时机
  • 生命周期分为四个阶段：创建、挂载、更新、销毁
    • 创建阶段：
      • beforeCreate 组件刚刚被创建 属性还未计算(比如data属性是没有值的)
      • Created 组件实例已经被创建 属性已经绑定 但是DOM还未生成 也就是$el不存在
    • 挂载阶段
      • beforeMount 挂载之前
      • mounted 挂载之后
    • 更新阶段
      • beforeUpdate 组件更新之前
      • updated 组件更新之后
    • 销毁阶段
      • beforeDestroy 组件销毁之前
      • destroy 组件销毁之后

发表于

– 来自一个前端的托坑之路，一入前端深似海。

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

发表于

title: vue路由

date: 2017-06-01 18:20:51

使用

在Vue项目中创建一个router文件夹，在文件夹下面创建index.js文件。通过import引入Vue和Vue-router 然后写入Vue use (Vue-router)

创建router对象

1
2
3
4
5
6
7
8
Let routet = new VueRouter({
   routers: [
    {
      path: '/',
      component: home
    },
   ] 
})

引入js 和 css文件

在main.js里面通过import的方式引入

文件不写后缀名

通过build文件夹里面的webpack.base.conf.js里面的resolve对象中的extensions[]中加入

路由有两种模式，哈希模式和history模式

在路由里面的mode:’history’

router-link的配置

  • :to可以传入对象

    1
    :to="{path:'/document'}"

  • :to动态绑定data数据

  • tag标签可以把router-link标签变为相对应的标签

    设置导航的选中状态

  • 全局设置
    • 在router实例下面写入键值对linkActiveClass:’定义好的类名’
  • 在行内设置
    • 在router-link行内输入active-class:’定义好的类名’

  • 切换的时候让子页面居中显示

    1
    <router-view class="center"></router-view>

  • 改变切换时的鼠标行为

    1
    <router-link event="mouseover"></router-link>

  • 路由的重定向

    • 新建一个新的路由，新建新的404页面

      1
      2
      3
      4
      {
          path:'*',
          component: 404
      }

    • 通过redirect设置路径

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
          {
              path: '*', //通配符路径
              //component: four
              //重定向
              //redirect: '/home'
              //redirect: {path: '/home'}
              //redirect: {name: 'Home'}
              redirect: (to) => { //以函数的形式动态设置重订项
                // to目标路由对象，就是访问的路径的路由信息
                console.log(to);
                if(to.path === '/123'){
                  return '/home'
                }else if(to.path === '/456'){
                  return {path: '/document'}
                }else {
                  return {name: 'About'}
                }
              }
          ``` 
      + 给路由起别名
          +

      {
      path:’/home’,
      name: ‘Home’,
      component: home,
      alias: ‘/index’ //路由别名 有可能会出现样式匹配不上
      },

      1
      2
      # 路由的嵌套
      + ### 配置根路径

      {

      path: '/',
component: home

      }

      1
      2
          + 在这里要注意把根路径配置好后，首页默认没有选中，在app.vue里面把to改为to='/' ,然后通过exact进行精确匹配。
      + ### 二级路由的配置


    About

    1
    2
    + 在一级路由里面加入chlidren:[{}]
    + 默认子路由

    children:[

    {
    path:'',//默认子路由
    component: study
}

    ]

    1
    2
    3
        在子的router-link中把to改变为to='/about'或者:to={name:'about'}，然后通过exact进行精确的匹配。
    + 一个路由路径对应多个组件
        + 首先要在app.vue里面写两个(多个)router-view，在router-view里面写入name属性将他们加以区分。


    1
    + 然后找到相应的子路由将component改为components，添加exfault属性添加默认组件。

    {

    path:'/',
name:'document',
components: {
    dafault；document,
    slider2: 'slider2'
}

    }

  • 动态路径(通过路径的变化向后台字符串返回相应的数据)

    • 匹配到所有路由，全部映射到同一个组件
    • 路径: /user/:userId useId为动态路径参数
    • 获取参数;路由信息对象的params
      1

  • 对组件的注入

    • 通过在Vue跟实例的router配置传入router实例

      + $router 得到router实例对象
+ $route 每访问一个路径对应的路由，也就是当前激活的路由对象，每个组件
+ beforeRouteEnter() 进入组件前的钩子函数
+ beforeRouterLeave() 离开组件前 的钩子函数

  • 路由信息对象

    • path 字符串，对应当前路由的路径
    • params对象，包含动态路由参数
    • query对象，url查询参数
    • hash字符串，当前路由表的hash值
    • fullPath字符串，url查询参数和hash值得完整路径
    • matched数组，包含当前路由的所有嵌套路径片段的卢义欧记录
    • name字符串，当前路由的名称

  • 查询字符串

    +

  • 路由原信息

    • 在路由配置中的meta可以配置一些自定义数据，用在路由信息对象（$router）中
    • 访问meta中的数据：$router.meta
      1
      2
      3
      4
      5
      6
      7
      8
      router[
          {
              path: '/',
              meta:{//自定义数据
                  index: 0
              }
          }
      ]

    • 通过$route.meta.index访问导航下标

      • 例子
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        export default {
            name: 'app',
            watch: {
                $route(to,from){
                    if(to.meta.index < from.meta.index){
                        this.name = 'right'
                    }else{
                        this.name = 'left'
                    }
                }
            }
        }

  • 导航钩子函数

    -- 导航发生变化时，导航钩子主要用来拦截导航，让它来完成跳转或取消
  • 执行导航钩子函数的位置
    • router全局
    • 单个路由
    • 组件中

  • 钩子函数

    • router实例上: beforeEach afterEach
    • 单个路由中： beforeEnter

    • 组件内的钩子: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

      • 单个组件内的钩子函数怎么访问data数据,在钩子函数内传入回调函数，函数内传入vm参数，通过vm.data访问
        ```
        在单个组件内

        let flags = {
        project: ‘我的项目’,
        workbench: ‘工作台’,
        doc: ‘文档’
        },

        export dafault{
        data(){

        flag: ''

        }
        },
        beforeRouteEnter(to,from,next){
        next((vm) => {

        vm.flag = flags[to.path.slice(1)]

        })
        }

  • 钩子函数内的接收参数

    • to: 要进入的目标路由对象 到哪里去
    • from：正要离开的导航路由对象 从哪里来
    • next：用来决定跳转或者取消导航