vue--------------之vue-router如何使用

路由中有三个基本的概念 route, routes, router。

　　　　1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮  => home内容， 这是一条route,  about按钮 => about 内容， 这是另一条路由。

　　　　2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

　　　　3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

基本的使用方法相信大家都懂：

1.安装并进入vue-router

2.执行vue-router  -------------------------- Vue.use(VueRouter)

3.写好路由配置

4.new一个vue-router实例，并且将配置传到实例上去

5.在文件内将vue-router实例挂到vue实例上

---------------------------------------基本使用不懂得可以移步之官方文档进行查看---------------------------

以下具体进行说明实战中可能遇到的问题：------

1.vue使用params,query传参的区别

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

区别1：路由设置这里， 当你使用params方法传参的时候，要在路由后面加参数名， 并且传参的时候，参数名要跟路由后面设置的参数名对应。使用query方法，就没有这种限制，直接在跳转里面用就可以。

注意： 如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候 参数会丢失 ，那依赖这个参数的http请求或者其他操作就会失败。

区别2：params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

2.vue  会默认复用你的组件

It is also called when the route has changed and the current component is reused. Use this hook to load and set data on the current component.

解决方法有二：

1.在B组件route hooks选项中配置canReuse为false，这样B组件每次都重新实例化，ready每次都调用；

2.ajax从ready中移到route选项中的data配置中

beforeRouteEnter (to, from, next) {

     // 在渲染该组件的对应路由被 confirm 前调用

     // 不！能！获取组件实例 `this`

     // 因为当钩子执行前，组件实例还没被创建

//so, 只能用vm访问组件实例

  },

  beforeRouteUpdate (to, from, next) {                 //(2.2 新增)

    // 在当前路由改变，但是该组件被复用时调用

    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  }

3.vue-router 的全局路由钩子

全局的路由钩子常见于网站的登录判断，可以对每个路由做一个统一的监听及处理。

router.beforeEach((to, from, next) => {
   
	document.body.scrollTop=0;
	next();--------------------每个路由具体的跳转
});router.afterEach((to, from) => {           })

4.vue 路由页面滑动到指定位置

首先必须是mode :"history" 模式下

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    scrollBehavior (to, from, savedPosition) {
      if (savedPosition) {
           return savedPosition
      } else {
      return { x: 0, y: 0 }
   }
 }
  }
})    

然而实际使用中发现有时会失效-----------替代的方法

在router的全局路由钩子中用原生的js去解决这一问题（见第3点）