vue2路由方式--巢狀路由實現方法分析
阿新 • • 發佈:2020-03-07
本文例項講述了vue2巢狀路由實現方法。分享給大家供大家參考,具體如下:
前面講過了vue2路由基本用法,一般應用中的路由方式不會像上述例子那麼簡單,往往會出現二級導航這種情況。這時就需要使用巢狀路由這種寫法。
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>routerTest1</title> <c:import url="importFile.jsp"></c:import> </head> <body> <div id="app"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#" rel="external nofollow" >Brand</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <%--定義跳轉的路徑--%> <li class="active"> <router-link to="/home">Home</router-link></li> <li> <router-link to="/list">List</router-link></li> </ul> </div> </div> </nav> <div class="container"> <!—路由切換元件template 插入的位置 --> <router-view></router-view> </div> </div> <script type="x-template" id="modalTel"> <div> <h1> this is home page </h1> <div> <ul > <li> <router-link to="/home/lists">List</router-link> </li> <li> <router-link to="/home/detail">Detail</router-link> </li> </ul> </div> <router-view></router-view> </div> </script> <script> /* * var Home = Vue.extend({ template:'<h1> this is home page </h1>',}) * */ /*使用Javascript模板定義元件*/ var Home = Vue.extend({ template:'#modalTel' }) /*建立路由器例項*/ const router = new VueRouter({ routes:[ { path: '/',redirect: '/home' },{ path:'/home',component:Home,/*巢狀下的路由(子路由)*/ children:[ { path:'/home/lists',component:{ template:'<h1> this is lists pages</h1>' },},{ path:'/home/detail',component:{ template:'<h1> this is detail pages</h1>' },} ] },{ path:'/list',component:{ /*顯示路由的屬性*/ template:'<h1> this is list page----{{$route.path}}</h1>' } } ] }); const app = new Vue({ router:router }).$mount('#app') </script> </body> </html>
上文中的 importFile,jsp 在上一篇路由基本用法中介紹過了,就是引入需要的檔案。
希望本文所述對大家vue.js程式設計有所幫助。