碰到的VUE的几个小知识补充

学过angular的皮毛，后来公司项目需要，搞了VUE，上手还是挺快的。开发中遇到几个小知识，补充一下

解决vue路由本页面参数变化页面不刷新

官方叫“响应路由参数的变化”

watch: {
	// 路由监听
    '$route' (to, from) {
         // 对路由变化作出响应...
        console.log('url变化了');
    }
}

vue的两种url传参方式

方法一

<router-link :to="{path:'/name',query:{key:value,key2:value2}}"> </router-link>

跳转到目标页面后，观察页面地址栏的url，你会发现神奇的有了‘get’参数“#/name?key=value&key2=value2”，获取参数很简单

var key = this.$route.query.key;
var key2 = this.$route.query.key2;

优点：使用灵活、方便

方法二

这个方法需要在路由里面直接定义，如下：

export default new Router({
  routes: [
    {
      path: '/demo/:key/:key2',
      component: demo,
    },
  ]
})

带冒号的就是要传的参数名，目标页面获取参数的方法如下：

var key = this.$route.params.key;
var key2 = this.$route.params.key2;

两个相比较

两个比较下来，我更新喜欢使用第一种方法，使用起来更灵活，参数的多少并没有限制，但是要考虑浏览器对URL长度的限制；
第二个方法过于严谨，不仅路由需要定义，而且，使用的时候少一个参数就会找不到页面，判定路由不存在，项目中间需求改了多加个参数还得改路由。

vue路由使用的几个小知识

vue的路由很好玩，可以像原生js一样传参，跳转，后退，刷新等等。（事实上，vue里面用原生js也是ok的）

1.跳转到name页面
this.$router.push('/name');
2.刷新本页面
this.$router.go();
3.后退一个页面
this.$router.go(-1);
4.后退两个页面
this.$router.go(-2);
5.据说能退n步(回头试试，捂脸)
this.$router.go(n);
6.替换当前页面，是替换，替换！不会给浏览器留下‘history’
this.$router.replace('/demo');

vue的路由导航守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

有什么用呢？举个栗子
场景一：做H5的app时，需要限制页面的后退，不能登录后还能后退到登录界面；不能退出登录了，点击后退还能进入登录后的界面，（这个app是有账号才能进的）；
场景二：部分页面需要登陆才能进的，比如商城项目，购物券、优惠券、购物卡、我的订单、我的积分等等，都是登录才有的信息；

# main.js #
router.beforeEach((to, from, next) => {
    // console.log('路由跳转');
    let allowVisit = true;    //    给个默认值true
    if (to.meta.allowVisit !== undefined) {
        allowVisit = to.meta.allowVisit;
    }
    // console.log('allowVisit:', allowVisit);
    var token = window.localStorage.getItem('token');
    if (!allowVisit && !token) {
        next({ path: '/login' })
    } else {
        next();
    }
})

上面的代码就实现了场景二的需求，每次路由跳转都会判断是否已经登录，如果是特定的页面并且没有登陆，就回到登录界面。当然，我的路由在定义的时候页做了些手脚，如下：

export default new Router({
  routes: [
    {
        path: '/placeOrder',
        component: placeOrder,
        meta: {allowVisit: false}
    },
  ]
})

多了个‘meta’参数，用来判断是否是必须登录才能访问的界面