Vue+Vue--Router結合開發
阿新 • • 發佈：2018-07-08
end 出口 一級路由 jpg ear 技術分享 dir head top
Vue+Vue--Router結合開發
在實際開發中，用 Vue.js + vue-router 創建單頁應用，是非常簡單的。
在使用 Vue.js 時，我們就已經把組件組合成一個應用了，當你要把 vue-router 加進來，只需要配置組件和路由映射，然後告訴 vue-router 在哪裏渲染它們。
一、Vue-Router
-
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<template id="h5">
<div>
<h2>HTML5學院</h2>
<p>掌握面向未來的神技！</p>
</div>
</template>
<template id="java">
<div>
<h2>Java學院</h2>
<p>都是Java是世界上最好的語言！</p>
</div>
</template>
<template id="python">
<div>
<h2>Python學院</h2>
<p>現在好火熱呀！</p>
</div>
</template>
<script_top src="js/vue.js"></script_top>
<script_top src="js/vue-router.js"></script_top>
<script_top>
// 1.創建組件
const Html5 = Vue.extend({
template = "#h5"
});
const Java = Vue.extend({
template = "#java"
});
const Python = Vue.extend({
template = "#python"
});
// 2.定義路由
const routes = [
{path:‘/h5‘, component: Html5},
{path:‘/java‘, component: Java},
{path:‘/python‘, component: Python},
];
// 3.創建路由實例
const router = new VueRouter({
routes
});
// 4.創建Vue的實例，開掛載
new Vue({
router
}).$mount(‘#app‘)
</script_top>
</body>
</html>
1.一級路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
<script_top src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script_top>
<script_top src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script_top>
<body style="background:#ccc;">
<div id="app">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="page-header">
<h1>IT貝貝教育</h1>
</div>
</div>
</div>
<div class="row">
<!--左邊列表-->
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 使用 router-link 組件來導航. -->
<!-- 通過傳入 `to` 屬性指定鏈接. -->
<!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->
<router-link class="list-group-item" to="/h5">Html5學院</router-link>
<router-link class="list-group-item" to="/java">Java學院</router-link>
<router-link class="list-group-item" to="/python">Python學院</router-link>
</div>
</div>
<!--右邊內容-->
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 路由出口 -->
<!-- 路由匹配到的組件將渲染在這裏 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
<template id="h5">
<div>
<h2>HTML5學院</h2>
<p>掌握面向未來的神技！</p>
</div>
</template>
<template id="java">
<div>
<h2>Java學院</h2>
<p>都是Java是世界上最好的語言！</p>
</div>
</template>
<template id="python">
<div>
<h2>Python學院</h2>
<p>現在好火熱呀！</p>
</div>
</template>
<script_top src="js/vue.js"></script_top>
<script_top src="js/vue-router.js"></script_top>
<script_top>
// 1.創建組件
const Html5 = Vue.extend({
template:"#h5"
});
const Java = Vue.extend({
template:"#java"
});
const Python = Vue.extend({
template:"#python"
});
// 2.定義路由
const routes = [
{path:‘/h5‘, component: Html5},
{path:‘/java‘, component: Java},
{path:‘/python‘, component: Python},
//配置跟路由
{path:‘/‘,redirect:‘/h5‘}
];
// 3.創建路由實例
const router = new VueRouter({
routes
});
// 4.創建Vue的實例，開掛載
new Vue({
router
}).$mount(‘#app‘)
</script_top>
</body>
</html>
運行結果：
Vue+Vue--Router結合開發