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();
}
}