vue路由知識整理

vue路由知識整理

對於單頁應用,官方提供了vue-router進行路由跳轉的處理.咱們已經能夠經過組合組件來組成應用程序，當你要把 vue-router 添加進來，咱們須要作的是，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們。

參考文章

https://router.vuejs.org/zh-c...

動態配置路由

HTML

<p>
    <!-- query要用path來引入，params要用name來引入,故不能寫爲 :to="{path:'/login',params: {isLogin: true}} -->
    <!-- 跳轉路由時用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); -->
    <!-- 接收參數時用（注意是$route而不是$router了哦）this.$route: this.$route.params.isLogin; 和 this.$route.query.isLogin -->
    <router-link :to="{name:'login',params: {isLogin: true}}">親，請登陸</router-link>
    <router-link :to="{name:'login',params: {isLogin: false}}">免費註冊</router-link>
  </p>
  <!-- 路由出口, 路由匹配到的組件將渲染在這裏 -->
  <router-view></router-view>

route/index.js

import Vue from 'vue';
import Router from 'vue-router';
import login from 'pages/login/login.vue';
import home from 'pages/home/home.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/home',
      // 命名路由，經過一個名稱來標識一個路由顯得更方便一些，特別是在連接一個路由
      // 使用<router-link :to="{ name: 'main', params: { userId: 123 }}">User</router-link> 或者 router.push({ name: 'main', params: { userId: 123 }})
      name: 'home',
      component: home,
      meta: { // 路由元信息
        keepAlive: false,
        auth: false,
        title: '主頁'
      },
      // 若是 props: true 被設置爲 true，route.params 將會被設置爲組件屬性
      // 路由組件傳參 https://router.vuejs.org/zh-cn/essentials/passing-props.html
      props: false,
      beforeEnter: (to, from, next) => { // 路由獨享守衛 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
        console.log('beforeEnter');
        next();
      }
    },
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: {
        keepAlive: false, // 用於在 <keep-alive> 中使用，判斷是否須要進行緩存
        auth: false, // 判斷是否須要進行登陸校驗
        title: '登陸' /* 能夠經過$route.meta.title 後取當前的描述信息、菜單信息 */
      }
    },
    {
      path: '*', /* 默認跳轉到登陸界面 */
      redirect: {path: '/login'}
    }
  ],
  // <router-link to="/bar#anchor">/bar#anchor</router-link>
  // 能夠經過selector模擬滾動到錨點的行爲 { selector: string, offset? : { x: number, y: number }}
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) { // 瀏覽器後退/前進時savedPosition可用
      return savedPosition;
    } else if (to.hash) {
      return {
        selector: to.hash
      };
    } else {
      return new Promise((resolve, reject) => { // 異步滾動
        setTimeout(() => {
          resolve({x: 0, y: 0});
        }, 500);
      });
    }
  }
});

router.beforeEach((to, from, next) => {// 註冊一個全局前置守衛
  if (to.matched.some(m => m.meta.auth)) {// 判斷是否須要校驗
    var a = true;

    if (a) { // 獲取
      next(); // 校驗經過，正常跳轉到你設置好的頁面
    } else {
      next({ // 校驗失敗，跳轉至登陸界面
        path: '/login',
        query: {
          redirect: to.fullPath
        } // 將跳轉的路由path做爲參數，用於在登陸成功後獲取並跳轉到該路徑
      });
    }
  } else {
    next(); // 不須要校驗，直接跳轉
  }
});

export default router;

login.js

export default {
  validator: null,
  data () {
    return {
      isLogin: true
    };
  },
  created () {
    // 接受路由參數，並判斷是登陸仍是註冊頁面（注：是$route而不是$router）
    if (this.$route.params.isLogin !== undefined) {
      this.isLogin = this.$route.params.isLogin;
    }
  }
};