标签：upper   定位   dir   hello   getters   fir   自定义指令   指令   reset   

this.$router.go(-1); // 返回上一个页面
this.$router.replace('/menu'); // 跳转到指定的路由
this.$router.replace({
    name : 'menulink'
}); // 通过name属性跳转到指定路由
this.$router.push('/about'); // 跳转到about, 最常用 

导航守卫

全局守卫

router.beforeEach((to, from, next) => {
  // alert('还没有登录,请先登录');
  // next();  //显示要去的页面
  // console.log(to.path);
  if(to.path == '/login' || to.path == '/regist') {
    next();
  } else {
    alert('还没有登录,请先登录');
    next('login');
  }
});

后置钩子

// 进入之后会触发这个
router.afterEach((to, from) => {
  console.log('jinrule');
});

路由独享守卫

// 写在特定的路由中, 只针对特定的路由
// next(false) 不会正常跳转
{
  path : '/admin', 
  component : Admin,
  beforeEnter : (to, from, next) => {
    console.log(1);
    next();
  }
}

组件内守卫

beforeRouteEnter : (to, from, next) => {
  // 组件未渲染前  不能拿到对应的数据
  // console.log("Hello " + this.name);
  next(vm => {
    console.log(vm.name);
  });
}
// 离开组件之前
beforeRouteLeave : (to, from, next) => {
  if(confirm("确定离开吗?")) {
    next();
  }
}

router-view 复用

{
  name : 'homelink', 
  path : '/', 
  // 在'/'中显示多个router-view
  // 其中orderingGuider, delivery
  // history 为有name属性且和上述对应
  // 的router-view
  // default 为默认的没有name属性的路由
  components : {
    default : Home,
    orderingGuide : OrderingGuide,
    delivery : Delivery,
    history : History
  }
},

控制滚动行为

进入页面之后直接滚动到指定位置

// 在new VueRouter中可以使用
scrollBehavior(to, from, savedPosition) {
  return { 
    x: 0, 
    y: 550 
  };
  // 第一个有.btn类的在最上面
  return {
    selector: '.btn'
  };
  // 浏览器按回退时起作用
  if(savedPosition) {
    return savedPosition;
  } else {
    return {
      x : 0,
      y : 0
    };
  }
}

获取路由参数

首先在路由中设置对应的参数

{
    path: '/blog/:id',
}

跳转链接中 to="/blog/2"
可以在对应的组件中使用 this.$route.params.id 获取参数值 2

通过路由传递参数

在跳转时 使用 this.$router.push()
push中需要穿一个对象

{
    path: '/test',
    query: {
        message: '这是传递的消息'
    }
}

跳转后的页面接受参数

// 需要注意的时 this.$route 
this.$route.query.message 

vuex store 使用

准备 npm install vuex 安装vuex模块
新建store 文件 用来保存全局的数据
全局注册组件 Vue.use(Vuex)
实例化vuex对象 new Vuex.store()
new Vuex.store()时可以传的键值

state 用来保存数据

getters 用来获取数据，不会修改原来的数据

也不能真的修改， getters里面修改会报错
不过也可返回修改后的数据
使用: this.$store.getters.方法名
getters 中的方法有两个参数，一个为state， 一个为 getters（整个getters对象）

mutations 需要改变值，并触发事件 需要使用 commit方法

store.commit(‘事件名字‘, {参数})
或者

// payload 会接受所有的参数，包括type
store.commit({
    type: '事件名字',
    params: params
});

mutations 的方法有两个参数， 一个为state， 一个为payload
接受的参数放在 payload 中

action 实现异步操作 提交mutation 而不是直 接变更状态

触发方式 store.dispatch 分发action
传递参数 store.dispatch(‘方法‘, {参数})
参数只有一个 payload 可以是任意类型
在action 方法内部去同步或异步commit mutations中的方法

• map
  需要的参数为一个对象， 用来保存数据，没有要求
  export store
  使用 computed 属性
  this.$store.属性
• mapGetters ：
  当要触发的getters 中的方法比较多时，
  可以使用这个方式
  需要 babel-preset-stage-2 --save-dev
  mapGetters 为es6的方法

import { mapGetters } from 'vuex'
...mapGetters([
    "func1",
    "func2"    
])

• mapActions 与 上述类似

plugins 接受一个数组，里面放各种插件（函数)

函数接受一个store参数，在store初始化的时候会调用这些函数
可以执行一些复杂或异步操作

// 会在每次触发mutation后调用函数内部的store.subscribe中的方法
// mutation 为 payload 参数
store.subscribe((mutation, state) => {
    // TODO
})

modules

放 module 对象， 该对象中可以放上面所有的属性，
相当于进一步的封装
dispatch 时 只需 对应的方法名就可以
如果 有 namespaced: true则需要使用moduleName/methodName
在模块中注册全局action

methodName: {
    root: true,
    handler (namespacedContext, payload) { 
        ... 
    }
}

// 通过name0/name1访问
// 也可以只有一个'name'
store.registerModule(['name1', 'name'1], {
    ...
}

自定义指令

// 可以在局部用directives 注册指令
Vue.directive('color', {
  // el 调用这个指令的标签
  // binding 传递的信息
  // 如 v-for 后面的 item in items
  // 传递参数为字符串时需要有引号 *特别
  // binding.arg 传递的参数 :col 需要加:
  // 如 v-color:test="'col'"
  bind(el, binding, vnode) {
    el.style.color = '#f0f';
  }
})

过滤器

Vue.filter('to-uppercase', function(value) {
  return value.toUpperCase();
});

使用

{{ name | to-uppercase }}

局部的过滤器

// 在局部的vue实例中使用filters
filters : {
  'to-uppercase': function (value) {
    return value.toUpperCase();
  } 
}

Vue

标签：upper   定位   dir   hello   getters   fir   自定义指令   指令   reset   

原文地址：https://www.cnblogs.com/tujw/p/12004604.html