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