快捷導(dǎo)航

詳解如何使用router-link對象方式傳遞參數(shù)？

更新時(shí)間：2019年05月02日 10:42:53 作者：草巾冒小子

這篇文章主要介紹了如何使用router-link對象方式傳遞參數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

疑問：（判斷和傳參）

點(diǎn)擊導(dǎo)航欄目，js如何判斷自己點(diǎn)擊的是哪個(gè)具體欄目？
它們是如何傳參的？
如何使用params，攜帶查詢參數(shù)？

效果圖解說：

A. 點(diǎn)擊選擇【屈原“查看詳情”】之前

B. 點(diǎn)擊選擇【屈原“查看詳情”】之后

要點(diǎn)總結(jié)：

在vue-router中，有兩大對象被掛載到了實(shí)例this；
$route（只讀、具備信息的對象）；
$router（具備功能的函數(shù)）

查詢字符串：

1.去哪里？

<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

2.導(dǎo)航（查詢字符串path不用改）

{name:'detail',path:'/detail',組件}

3.去了干嘛？獲取路由參數(shù)（要注意是 query ，還是 params 和對應(yīng)的 id 名? 是后者需要注意設(shè)置相關(guān)文件的id規(guī)則）

+ this.$route.query.id

path方式：

1.去哪里？

<router-link :to="{name:'detail',params:{name:1}}"> xxx </router-link>

2.導(dǎo)航（查詢字符串path不用改）

{name:'detail',path:'/detail/:name',組件}

3.去了干嘛？獲取路由參數(shù)（要注意是 query ，還是 params 和對應(yīng)的 name 名? 是后者需要注意設(shè)置相關(guān)文件的id規(guī)則）

+ this.$route.params.id

相關(guān)文件代碼：

1. main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主體（頁面初始化顯示）
import App from './components/app.vue';
//一個(gè)個(gè)link對象 - 分類
import Detail from './components/detail.vue';
import List from './components/list.vue';

//安裝插件
Vue.use(VueRouter);//掛載屬性

//創(chuàng)建路由對象并配置路由規(guī)則
let router = new VueRouter({
  //routes
  routes: [
  //一個(gè)個(gè)link對象
  {name: 'detail',path: '/detail',component: Detail},
  //此處的path規(guī)則不受list.vue中的query（匹配參數(shù)規(guī)則的）影響
  {name: 'list',path: '/list',component: List}
 ]
});

/* new Vue 啟動 */
new Vue({
 el: '#app',
 render: c => c(App),
 //讓vue知道我們的路由規(guī)則
 router:router,//可以簡寫為router
})

2. app.vue文件

<template>
 <div>
  <div class="header">
    頭部 - 導(dǎo)航欄目

    <p>
      <router-link :to="{name:'detail'}">細(xì)節(jié)列表1</router-link>
      <router-link :to="{name:'list'}">英雄列表1</router-link>
    </p>
  </div>

  <!--留坑，非常重要-->
    <router-view class="main"></router-view>

    <div class="footer">底部 - 版權(quán)信息</div>

 </div>
</template>

<script>


  export default {
   data(){
    return{

    }
   },
   methods:{

   }
  }
</script>

<style scoped>
  .header,.main,.footer{text-align: center;padding: 10px;}

  .header{height:70px;background: yellowgreen;}
  .main{height:300px;background: skyblue;}
  .footer{height: 100px;background: hotpink;}
</style>

3. list.vue文件

<template>
  <div>
    我是list列表
    <!-- :key是綁定器 -->
    <!-- query是查詢字符串，加查詢參數(shù) ，相當(dāng)于查詢規(guī)則；對比參考main.js關(guān)于路由配置path屬性-->
    <ul>
      <li v-for="(hero,index) in heros" :key="index">
        {{hero.name}}
        <router-link :to="{name:'detail',query:{id:index}}">查看詳情</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        heros:[{
          name:'李白'
        },{
          name:'杜甫'
        },{
          name:'屈原'
        },{
          name:'白居易'
        },{
          name:'李清照'
        },{
          name:'歐陽修'
        }]
      }
    }
  }
</script>

<style scoped> 
  ul,li{list-style: none;}
</style>

4. detail.vue文件：（可以在控制臺查看打印結(jié)果）

<template>
  <div>
    我是詳情
  </div>
</template>

<script>
  export default{
    data(){
      return{

      }
    },//DOM尚未生成
    create(){
      //獲取路由參數(shù)
      //vue-router中掛載兩個(gè)對象的屬性
      //$route(信息數(shù)據(jù))
      //$router(功能函數(shù))
      /*console.log(this.$route.params);*/
      console.log(this.$route.query);

    },//已經(jīng)將數(shù)據(jù)裝載到頁面上去了，DOM已經(jīng)生成
    mounted(){

    }
  }
</script>

<style>
</style>

這就是本文的內(nèi)容。

以上所述是小編給大家介紹的如何使用router-link對象方式傳遞參數(shù)詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: