Vue路由（VueRouter）学习知识点总结

1、tag="li"把<outer-link转变为li标签，active-class="active"bootstrap的样式
<ul class="nav nav-pills">
  <router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
  <router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>
</ul>

2、路由传递参数：:id  to="/user/10" 中的10就是作为ID传递给下个页面，用this.$route.params.id接收
{path: '/user/:id',component: User}
<router-link to="/user/10" tag="li" active-class="active"><a>User</a></router-link>
data() {
  return {
      id: this.$route.params.id
  }
},
3、路由一旦切换就会刷新，不切换时要监听路由参数变化 to代表路由
watch: {
  '$route': function(to){
    this.id = to.params.id;
  }
},
4、路由传递参数
<router-link tag="button"  :to="{name: 'userEdit',params:{id:'45'},query:{id:100,name:'zhangsan'}}" class="btn btn-primary">Edit User</router-link>
点击效果等同于：http://localhost:8080/user/45/edit?id=100&name=zhangsan
5、重定向：
在浏览器输入http://localhost:8080/redirect-me，自动只想name=home的页面
{path: '/redirect-me',redirect: {name: 'home'}}
在浏览器输入http://localhost:8080/redirect-me，自动只想path=/user的页面
{path: '/redirect-me',redirect: { '/user'}}
当输入的连接上面都无法匹配时，设置通配符*，指向默认页面
  {path: '*',redirect: '/'}
6、路由命名
<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
<router-link to="/user" tag="li" active-class="active"><a>User</a></router-link>

<router-view name="headerTop"></router-view>
<router-view></router-view>
<router-view name="headerBottom"></router-view>

{path: '',name: 'home',components:{
    default: Home,
    headerTop: Header
  }},
{path: '/user',component: User,components:{
  default: User,
    headerBottom: Header
  }},
7、判断路由是否能访问3种方法
  1）：main.js中设置beforeEach，该设置为全局设置，访问任何路由都要判断
    router.beforeEach((to,from,next)=>{
      console.log("every router before");
      next();
    });
  2）：routes.js设置beforeEnter，该设置只对UserDetail有效
    {path: ':id', component: UserDetail,beforeEnter:(to,from,next)=>{
        console.log("UserDetail routes router before");
        next();
    }},
  3）：在vue文件中设置beforeRouteEnter，该设置只对UserDetail本文件有效
    export default {
        beforeRouteEnter(to,from,next) {
            console.log("UserDetail UserDetail.vue router before");
            next();
        }
    }
    后台输出顺序为：
    every router before
    UserDetail routes router before
    UserDetail UserDetail.vue router before

7、判断路由是否能离开：
  export default {
      data() {
          return {
              confirm: false
          }
      },
      beforeRouteLeave(to,from,next){
          if(this.confirm){
              next();
          }else {
              if(confirm("是否确认离开？")){
                  next();
              }else{
                  next(false);
              }
          }
      }
  }
8、路由懒加载：在router.js设置。最后的user为组名，即其中一个加载的时候，所有组名为user的路由同时加载，不加组名，只加载自己
const User = resolve => {
    require.ensure(['./components/user/User.vue'], () => {
        resolve(require('./components/user/User.vue'));
    }, 'user');
};
const UserStart = resolve => {
    require.ensure(['./components/user/UserStart.vue'], () => {
        resolve(require('./components/user/UserStart.vue'));
    }, 'user');
};
const UserEdit = resolve => {
    require.ensure(['./components/user/UserEdit.vue'], () => {
        resolve(require('./components/user/UserEdit.vue'));
    }, 'user');
};
const UserDetail = resolve => {
    require.ensure(['./components/user/UserDetail.vue'], () => {
        resolve(require('./components/user/UserDetail.vue'));
    }, 'user');
};