028_vue路由嵌套
生活随笔
收集整理的這篇文章主要介紹了
028_vue路由嵌套
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 嵌套路由功能分析
1.1. 點擊父級路由鏈接顯示模板內容。
1.2. 模板內容中又有子級路由鏈接。
1.3. 點擊子級路由鏈接顯示子級模板內容。
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"><!-- 1. 父路由鏈接 --><router-link to="/zhuye">zhuye</router-link><router-link to="/keji">keji</router-link><!-- 2. 父路由組件占位符 --><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/><!-- 1. 子路由鏈接 --><router-link to="/keji/tab1">tab1</router-link><router-link to="/keji/tab2">tab2</router-link><!-- 2. 子路由的占位符 --><router-view /></div>`};var tab1 = {template: '<h3>tab1 子組件</h3>'};var tab2 = {template: '<h3>tab2 子組件</h3>'};// 創建路由實例對象var router = new VueRouter({// 所有的路由規則routes: [{ path: '/', redirect: '/zhuye' },{ path: '/zhuye', component: zhuye },{ path: '/keji', component: keji, // 通過children屬性, 為path: '/keji'添加子路由規則children: [{ path: '/', redirect: '/keji/tab1' },{ path: '/keji/tab1', component: tab1 },{ path: '/keji/tab2', component: tab2 }]}]});var vm = new Vue({el: "#app",data: {},// 掛載路由實例對象// router: routerrouter});</script></body> </html>3.2. 效果圖
總結
以上是生活随笔為你收集整理的028_vue路由嵌套的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 027_vue路由
- 下一篇： 030_vue命名路由