vue 2ルート方式--入れ子ルートの実現方法の分析
本論文の例は、Vue 2の入れ子ルーティングの実現方法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
前に述べたvue 2ルートの基本的な使い方によれば、一般的に適用されているルーティングは上記のように簡単ではなく、二次ナビゲーションという場合があります。この場合は、入れ子ルートという書き方が必要です。
上記のimportFileは、jspが前のルートの基本的な使い方で紹介しました。必要なファイルを紹介します。
ここで述べたように、皆さんのvue.jsプログラムの設計に役に立ちます。
前に述べたvue 2ルートの基本的な使い方によれば、一般的に適用されているルーティングは上記のように簡単ではなく、二次ナビゲーションという場合があります。この場合は、入れ子ルートという書き方が必要です。
<%@ 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プログラムの設計に役に立ちます。