這篇文章給大家介紹利用vue怎么在單頁面應用里使用二級套嵌路由，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)是一家集網站建設,梁子湖企業(yè)網站建設,梁子湖品牌網站建設,網站定制,梁子湖網站建設報價,網絡營銷,網絡優(yōu)化,梁子湖網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

在一個單頁面應用里使用二級套嵌路由

目錄結構如下：

其中main.js為全局配置文件，App.vue為項目入口。

main.js中路由配置如下

import Vue from 'vue'//引入vue
import App from './App'//引入主模板
import Router from 'vue-router'// 引入router路由
// 引入項目的模塊組件
import licai from './components/licai'
import home from './components/home'
import wode from './components/wode'
import home1 from './components/home/home1'
import home2 from './components/home/home2'
import home2_1 from './components/home/home2_box/home2_1'//套嵌路由
import home2_2 from './components/home/home2_box/home2_2'
 
Vue.use(Router)// 使用router
 
// 定義路由
var routes = [
{ path: '/', redirect: '/home' },//默認顯示home
{
 path: '/home',
 component: home,//路徑home的組件是home
 meta: { navShow: true}
}, {
 path: '/licai',
 component: licai,
 meta: { navShow: true}
}, {
 path: '/wode',
 component:wode,
 meta: { navShow: true}
},{
  path:'/home1/:num',
  component:home1,
  meta: { navShow: false}
},{
  path:'/home2',
  component:home2,
  meta: { navShow: false},
  //這里定義了兩個子路由在home2模塊下
  children:[
    { path: '/home2/home2_1', component:home2_1},
    { path: '/home2/home2_2', component:home2_2}
  ]
}]
// 實例化路由
var vueRouter = new Router({
 routes//此路由為上方定義
})
// 創(chuàng)建和掛載根實例
new Vue({
 el: '#app',//vue項目在哪個元素下
 router: vueRouter,//使用路由
 template: '',
 components: { App }
})

App.vue為主模板，也就是入口文件，其中定義的路由與一級路由無任何區(qū)別：

home.vue，這里是首頁，從這里可以進入home2頁面：

home2.vue,這里可以展示套嵌路由了：

  

    路由套嵌
    子頁面1
    子頁面2
    
    
  

關于利用vue怎么在單頁面應用里使用二級套嵌路由就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站欄目：利用vue怎么在單頁面應用里使用二級套嵌路由-創(chuàng)新互聯(lián)
文章來源：http://weahome.cn/article/dcjssi.html