當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

028_vue路由嵌套

發(fā)布時(shí)間：2025/5/22 vue 76 豆豆

生活随笔收集整理的這篇文章主要介紹了 028_vue路由嵌套小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 嵌套路由功能分析

1.1. 點(diǎn)擊父級路由鏈接顯示模板內(nèi)容。

1.2. 模板內(nèi)容中又有子級路由鏈接。

1.3. 點(diǎn)擊子級路由鏈接顯示子級模板內(nèi)容。

2. 嵌套路由用法?

2.1. 父路由組件模板。

2.2. 子路由組件模板。?

2.3. 嵌套路由匹配, 父路由通過children屬性配置子路由。?

3. 嵌套路由例子

3.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>路由嵌套</title></head><body><div id="app"><router-link to="/zhuye">zhuye</router-link><router-link to="/keji">keji</router-link><router-view></router-view></div><script type="text/javascript" src="vue.min.js"></script><script src="vue-router_3.0.2.js"></script><script type="text/javascript">var zhuye = {template: '<h1>主頁信息</h1>'};var keji = {template: `<div><h1>科技信息</h1><hr/><router-link to="/keji/tab1">tab1</router-link><router-link to="/keji/tab2">tab2</router-link><router-view /></div>`};var tab1 = {template: '<h3>tab1 子組件</h3>'};var tab2 = {template: '<h3>tab2 子組件</h3>'};// 創(chuàng)建路由實(shí)例對象var router = new VueRouter({// 所有的路由規(guī)則routes: [{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji, // 通過children屬性, 為path: '/keji'添加子路由規(guī)則children: [{ path: '/', redirect: '/keji/tab1' },{ path: '/keji/tab1', component: tab1 },{ path: '/keji/tab2', component: tab2 }]}]});var vm = new Vue({el: "#app",data: {},// 掛載路由實(shí)例對象// router: routerrouter});</script></body> </html>

3.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的028_vue路由嵌套的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。