Vue 頁面跳轉方式 與 參數傳遞 編程導航

首先：

要清楚的是：vue中都是單頁面應用(SPA)居多，而所謂的頁面跳轉，也是通過history 或 hash 的方式找到對應的路由地址後，再進行重新渲染頁面視圖（可以測試一下，在window對象上掛載一個自定義屬性，只要不刷新頁面的話【當然也可以存放到本地存儲如：cookie、storage之中】，然後不管在哪個頁面 或 組件中都可以訪問到該自定義屬性，而這樣就和vuex的效果就是類似啦），而不是真正的頁面跳轉。

---

一、標籤跳轉：<router-link> 映射路由：

1、不帶參數跳轉

<!-- home頁面（首頁） -->

<template>

    <!-- 在Vue中的<router-link>標籤中，到頁面最終還是轉爲<a>標籤 -->

    <router-link to="/about">
        <button>打開關於我們 - 不帶參數1</button>
    </router-link>

    <router-link :to="{path: '/about'}">
        <button>打開關於我們 - 不帶參數2</button>
    </router-link>
</template>

 

2、帶參數跳轉 

<!-- home頁面（首頁） -->

<template>
    <router-link :to="{path: '/about', query: {id: 1024, name:'mupiao', age: 28 }}">
        <button>打開關於我們 - 帶參數1</button>
    </router-link>

    <router-link :to="{name: 'About', params: {id: 1024, name:'mupiao', age: 28 }}">
        <button>打開關於我們 - 帶參數2</button>
    </router-link>
</template>

 

3、接收參數

// About頁面（關於我們）

<template>
      <section>關於我們</section>
</template>


<script>
export default {
    name: "About",
    data() {
        return {};
    },
    created() {
        // 在Vue實例被創建之後的鉤子函數中，接收home頁面傳過來的參數

        // 以query方式接收參數：【query傳遞數據是通過URL傳遞的，類似ajax中的get方式】
        console.log(this.$route.query.id);      // 1014
        console.log(this.$route.query.name);    // mupiao
        console.log(this.$route.query.age);     // 28

        // 以params方式接收參數：【params方式，類似ajax中的post方式】
        console.log(this.$route.params.id);      // 1014
        console.log(this.$route.params.name);    // mupiao
        console.log(this.$route.params.age);     // 28
    }
}
</script>

 

 Vue常用路由配置規則：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'

// 抽離出在這個路由配置表中共用的頁面視圖，以方便多處使用
const Login = () => import(/* webpackChunkName: "Login" */ '../views/Login.vue');
const News = () => import(/* webpackChunkName: "News" */ '../views/News.vue');
const NotFound = () => import(/* webpackChunkName: "NotFound" */ '../views/NotFound.vue');

Vue.use(VueRouter);

const routes = [ 
  {
    path: '/', // 網站首頁
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  },
  {
    path: '/regist',
    name: 'Regist',
    component: () => import('../views/Regist.vue')
  },
  {
    path: '/main', 
    name: 'Main',
    meta: {
      userauth: true // 開啓用戶鑑權（用戶需登錄後，才能訪問）
    },
    component: Main,

    children: [ // 子路由
      {
        path: '/news/:id(\\d+)',
        name: 'News',
        meta: {
          userauth: true
        },
        component: News,

        children: [ // 第三級子路由
          {
            path: '/main/news/alert',
            name: 'Alert',
            component: () => import('../views/Alert.vue')
          },
          {
            path: '/card/:listId(\\d+)/list/:listId(\\d+)',
            name: 'Card',
            component: () => import('../views/Card.vue')
          }
        ]
      },
      {
        path: '/info/:id(\\d+)',
        name: 'Info',
        meta: {
          userauth: true
        },
        component: () => import(/* webpackChunkName: "Info" */ '../views/Info.vue')
      },
      {
        path: '/send',
        name: 'Send',
        meta: {
          userauth: true
        },
        component: () => import('../views/Send.vue')
      },

      // 默認顯示的子路由
      {
        path: '',
        name: 'News',
        component: News
      }
    ],
  },
  {
    path: '/about',
    name: 'About',
    meta: {
      userauth: true
    },
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/notfound',
    name: 'NotFound',
    component: NotFound
  },

  // 如果找不到對應的路由(頁面)就顯示404頁面
  {
    path: '*',
    name: 'NotFound',
    component: NotFound
  }

];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

router.beforeEach((to, from, next) => {
  // 在進入路由前，判斷到該路由需要鑑權（用戶登錄）則驗證用戶信息(!Store.state.user.userinfo 沒有用戶信息)，不通過則跳轉到登錄頁。
  if (to.matched.some(matched => matched.meta.userauth) && !Store.state.user.userinfo) {

    next({ name: 'Login' });
  } else {

    next();
  }
});

export default router;

 顯示子路由視圖一定要加上 <router-view></router-view>

// Main主框架頁面

<template>
  <Layout>

    <Header></Header>

    <Content>
      
      <!-- 顯示子路由視圖 -->
      <router-view></router-view>
    </Content>

    <Footer></Footer>

  </Layout>
</template>

<script>

import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Main",
  components: {
    Header,
    Footer
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.ivu-layout {
  .ivu-layout-content {
    min-height: 88vh;
  }
}
</style>

 

 

二、編程式路由跳轉： this.$router.push()

1、不帶參數跳轉

<!-- Home頁面（首頁） -->

<template>
    <router-link :to="{path: '/about'}">
        <button>打開關於我們</button>
    </router-link>

    <button @click="open">打開關於我們</button>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {};
    },
    methods: {
        open() {
            this.$router.push('/about');
        }
    },
}
</script>

 

2、帶參數跳轉

<!-- Home頁面（首頁） -->

<template>
    <router-link :to="{path: '/about'}">
        <button>打開關於我們</button>
    </router-link>

    <button @click="open1">打開關於我們 - query方式</button>
    
    <button @click="open2">打開關於我們 - params方式</button>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {};
    },
    methods: {
        // query方式
        open1() {  
            this.$router.push({
                path: '/about',
                query: {
                  id: 2048,
                  book: "了不起的Node.js",
                  job: "Web前端"
                }
            });
        },

        //⚠️注：如果要傳遞的參數很長時，請問params方式，因爲query方式是通過URL傳遞的，而URL傳參數長度是有限制的哦！！

        // params方式
        open2() {
            this.$router.push({
                name: "About", // ⚠️注：這裏不能用path路徑，只能用name【請對照router.js中的路由規則中的name項，還有就是一般首字母大寫】，否則取不到傳過去的數據
                params: {
                  id: 2048,
                  book: "了不起的Node.js",
                  job: "Web前端"
                }
            });
        }
    },
}
</script>

 

3、接收參數

// About頁面（關於我們）

<template>
      <section>關於我們</section>
</template>


<script>
export default {
    name: "About",
    data() {
        return {};
    },
    created() {
        // 在Vue實例被創建之後的鉤子函數中，接收home頁面傳過來的參數

        //⚠️注：在傳遞參數時，用什麼方式傳參，就用什麼方式接收！！

        // 以query方式接收參數：【query傳遞數據是通過URL傳遞的，類似ajax中的get方式】
        console.log(this.$route.query.id);      // 2048
        console.log(this.$route.query.book);    // 了不起的Node.js
        console.log(this.$route.query.job);     // Web前端

        // 以params方式接收參數：【params方式，類似ajax中的post方式】
        console.log(this.$route.params.id);      // 2048
        console.log(this.$route.params.book);    // 了不起的Node.js
        console.log(this.$route.params.job);     // Web前端

        // this.$route 路由信息對象
        console.log(this.$route);  //this.$route 對象中包涵了路由的相關信息，請自看！！

</script>

 

 

 

真正的頁面跳轉：

一、HTML超鏈接跳轉：<a href="http://www.xxx.com">跳轉鏈接</a>

//打開外部鏈接
<a target="_blank" href="https://www.baidu.com/s?wd=Vue">百度一下 Vue</a>

 

 

二、瀏覽器BOM中的location.href跳轉：

//在當前頁面打開URL頁面
window.location.href = "https://www.baidu.com/s?wd=Vue";

 

 

三、瀏覽器BOM中的window.open()跳轉：

//打開一個新的瀏覽器窗口

window.open("https://www.baidu.com/s?wd=Vue", "_blank", "width=1000, height=500", true);