vue-router的總結

vue-router中文官網

1、基本配置

• 一、安裝

  npm install vue-router

• 二、項目中基本配置

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  Vue.use(VueRouter)

• 三、設置路由鉤子函數

  // 路由配置
  const router = new VueRouter({
    mode: 'history',
    routes: Routers,
    linkActiveClass: 'active',
    linkExactActiveClass: 'active',
  });
  
  router.beforeEach((to, from, next) => {
    ...
    next();
  });
  
  router.afterEach((to, from, next) => {
    ...
    window.scrollTo(0, 0);
  });

• 四、使用

  new Vue({
    el: '#app',
    store,
    router,
    render: h => h(App)
  });

2、關於url幾個概念的介紹

• 一、query參數:

  http://localhost:8080/#/test2?id=word問號後面的參數

• 二、params參數

  http://localhost:8080/#/test1/1相似1這樣的

3、路由跳轉的幾種方法

• 一、直接在寫

  **路由配置**
  {
    path: '/test1/:number', // :number表示傳遞的params參數
    name: 'test1',
    component: test1,
    props: true
  },

  **頁面跳轉**
  <router-link to="/test1/1">普通傳參數到test1頁面</router-link> <br/>

• 二、動態配置query傳參

  **路由配置**
  {
    path: '/test2',
    name: 'test2',
    component: test2,
  },

  <router-link :to="{path: 'test2', query: {id: 'hello'}}">普通傳參數到test2頁面</router-link><br/>

• 三、動態配置params傳參

  **路由配置**
  {
      path: '/test3',
      name: 'test3',
      component: test3,
  },

  **注意這裏要寫name不是path**
  <router-link :to="{name: 'test3', params:{id:123}}">普通傳參數到test3頁面</router-link>

• 四、頁面點擊按鈕跳轉方式

  <button @click="gototest2">點擊跳轉到test2</button><br/>

  methods: {
      gototest2() {
        this.$router.push({
          name: 'test2',
          query: {
            id: 'word'
          },
          params: {
            'gender': '男'
          }
        })
      }
  }

4、在組件中獲取傳遞過來的參數

• 一、直接獲取

  mounted () {
    console.log(this.$route)
  }

5、說明

畢竟經過路由傳遞過去的值是有限的,若是傳遞的比較多能夠考慮從新請求接口或者走本地存儲的方式