vue子路由參數怎么傳遞與接收

這篇文章主要介紹“vue子路由參數怎么傳遞與接收”，在日常操作中，相信很多人在vue子路由參數怎么傳遞與接收問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue子路由參數怎么傳遞與接收”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

2.main.js中修改

import Vue from 'vue'
// import Router from './Router'     /*引用自同級Router.js*/
import Router from './SonRouter'     /*引用自同級SonRouter.js*/

3.src下新建文件SonRouter.js

/*子路由*/
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//聲明模版，點擊鏈接顯示對應的內容
const first = { template:'<div>first內容</div>'}
const second = { template:'<div>second內容</div>'}
const Home = { template:'<div>Home內容</div>'}
const firstFirst = { template:'<div>firstFirst內容 {{$route.params.id}} {{$route.params.name}}</div>'}
const firstSecond = { template:'<div>firstSecond內容 {{$route.params.id}} {{$route.params.name}}</div>'}

//單獨的寫組件模版的時候可直接這樣寫，名稱自定義
const sonRunterTemplate ={
  template:`
      <div class="">
            <h3>組件</h3>
            <router-view class="red"></router-view> 
       </div>
  `
}

//router自己定義名字
const router = new VueRouter({
  mode:'history',
  base:__dirname, //當前的路徑   dirname在node中指當前的本地路徑
  routes:[       //以數組的方式給出  [{},{}],多個的話一定是routes復數形式
    {path:'/',name:'Home',component:Home},
    {path:'/first',component:sonRunterTemplate,
        children:[
          {path:'/',name:'Home-First',component:first},
          {path:'first',name:'Home-First-First',component:firstFirst},
          {path:'second',name:'Home-First-Second',component:firstSecond}
        ]
    },
    {path:'/second',name:'Home-Second',component:second}
  ]
})

new Vue({
  router,
  template:`
    <div id='r'>
        <h2>導航</h2>
        <p>{{$route.name}}</p>
         <ol>
            <li><router-link to="/">/</router-link></li>   <!--router-link存放路由鏈接的   to相當于href，表示鏈接到哪里-->
            <li><router-link to="/first">first</router-link></li>
                <ol>
                    <li><router-link :to="{name:'Home-First-First',params:{id:147,name:'張三'}}">first</router-link></li>
                    <li><router-link :to="{name:'Home-First-Second',params:{id:258,name:'李四'}}">second</router-link></li>
                </ol>
            <li><router-link to="/second">second</router-link></li>
          </ol>
          <router-view class="green"></router-view>   <!--規定整個路由顯示在其中，class表示修飾的類-->
    </div>
    `
}).$mount('#app')
/*
路由中參數的傳遞：
    1.通過路由傳參 name:'Home-First'   獲取 <p>{{$route.name}}</p>
    2.綁定to方式進行參數的傳遞  :to="{name:'Home-First-Second',params:{id:258,name:'李四'}}"  獲取{{$route.params.id}} {{$route.params.name}}
    */
/*
route 路線  $route.params
router  路由
routes  路由復數形式  一定是數組
*/

運行結果：

到此，關于“vue子路由參數怎么傳遞與接收”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！