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}}); -->
    <!-- 接收引數時用this.$route: this.$route.query.isLogin 和 this.$route.params.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;
    }
  }
};

原文地址：https://segmentfault.com/a/1190000012801479