Vue的路由使用及參數接受

路由的基本使用

• 介紹
  • 理解：一個路由（route）就是一組映射關系（key-value），多個路由需要路由器（router）進行管理。
  • 前端路由：key是路徑，value是組件
• 基本使用
  • 安裝vue-router，命令：npm install --save vue-router
  • 應用插件：Vue.use(VueRouter)
  • 編寫router配置項：

    // 該文件專門用於創建整個應用的路由器
    import VueRouter from "vue-router";
    import About from '../components/About';
    import Home from '../components/Home';
    export default new VueRouter({
      routes:[
        {
          path: '/about',
          component: About,
        },
        {
          path: '/home',
          component: Home,
        },
      ]
    })
    

  • 實現切換（active-class可以配置高亮樣式）

    <!-- Vue中借助router-link標簽實現路由的切換 -->
    <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
    <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
    

  • 指定展示位置

    <!-- 指定組件的呈現位置 -->
    <router-view></router-view>
    

• 幾個注意點
  • 路由組件通常存放在pages文件夾，，一般組件通常放在components文件夾中。
  • 通過切換，‘隱藏’的路由組件默認是被銷毀的，需要的時候再去掛載
  • 每個組件都有自己的$route屬性，里面存放自己的路由信息
  • 整個應用只有一個router，可以通過組件的$router屬性獲取
• 多級路由
  • 配置路由規則，使用children配置項

    routes:[
      {
        path: '/home',
        component: Home,
        children: [
          {
            path: 'news',
            component: News,
          },
        ]
      },
    ]
    

  • 跳轉（填寫完整路徑）

    <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
    

• 路由的query參數
  • 傳遞參數

    <!-- 跳轉路由並攜帶query參數，to的字符串寫法 -->
    <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}&views=${m.views}`">{{m.title}}</router-link>
    <!-- 跳轉路由並攜帶query參數，to的對象寫法 -->
    <router-link :to="{
      path: '/home/message/detail',
      query: {
        id: m.id,
        title: m.title,
        views: m.views
      }
    }">
      {{m.title}}
    </router-link>
    

  • 接受參數：

    $route.query.id
    $route.query.title
    $route.query.views
    

• 命名路由
  • 作用：可以簡化路由的跳轉
  • 如何使用：
    • 給路由命名

      routes:[
        {
          path: '/home',
          component: Home,
          children: [
            {
              path: 'message',
              component: Message,
              children: [
                {
                  name: 'msg-d',
                  path: 'detail',
                  component: Detail,
                }
              ]
            },
          ]
        },
      ]
      

    • 簡化跳轉

      <!-- 簡化前 -->
      <!-- 跳轉路由並攜帶query參數，to的對象寫法 -->
      <router-link :to="{
        path: '/home/message/detail',
        query: {
          id: m.id,
          title: m.title,
          views: m.views
        }
      }">
        {{m.title}}
      </router-link>
      <!-- 簡化后 -->
      <!-- 跳轉路由並攜帶query參數，to的對象寫法 -->
      <router-link :to="{
        path: 'msg-d',
        query: {
          id: m.id,
          title: m.title,
          views: m.views
        }
      }">
        {{m.title}}
      </router-link>
      

• 路由的params參數

  • 配置路由：聲明接受params參數

    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News,
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              name: 'msg-d',
              path: 'detail/:id/:title/:views',   // 使用占位符接受params參數
              component: Detail,
            }
          ]
        },
      ]
    },
    

  • 傳遞參數

    <!-- 跳轉路由並攜帶query參數，to的字符串寫法 -->
    <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.views}`">{{m.title}}</router-link>
    <!-- 跳轉路由並攜帶query參數，to的對象寫法 -->
    <router-link :to="{
      name: 'msg-d',    // 這種寫法必須使用name配置
      params: {
        id: m.id,
        title: m.title,
        views: m.views
      }
    }">
      {{m.title}}
    </router-link>
    

  • 接受參數：

    $route.params.id
    $route.params.title
    $route.params.views
    

路由的props配置

• 作用：讓路由組件更方便的收到參數（query、params）

  {
    path: 'message',
    component: Message,
    children: [
      {
        name: 'msg-d',
        path: 'detail/:id/:title/:views',
        component: Detail,
        // props的第一種寫法，值為對象。該對象的所有key-value都會以props的形式傳給當前組件中
        props: {a:1, b:2},  // 固定值
        // props的第二種寫法，值為boolean。就會把該路由組件收到的所有params參數，以props的形式傳給當前組件中，即在組件中配置props屬性接受鍵值
        // props:true,
        // props的第三種寫法，值為function。就會把該路由組件收到的所有params參數，以props的形式傳給當前組件中，即在組件中配置props屬性接受鍵值
        props($route) {
          return {
            id: $route.params.id,
            title: $route.params.title,
            views: $route.params.views,
          }
        },
        // props({params:{id, title, views}}) {   // 不推薦，不易於理解
        //   return {
        //     id, title, views,
        //   }
        // },
      }
    ]
  },