參考：https://www.cnblogs.com/xiaohuochai/p/7388866.html
效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>js實現vue—引入子組件props傳參</title>
<link rel="stylesheet" href="css/1.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="js/1.js"></script>
</head>
<body>
<div id="app">
<keep-alive>
<router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
</div>
<script type="text/x-template" id="page1">
<div>
<TopNav :show-btn="ifShow"></TopNav>,
<!-- 對於props聲明的屬性來說，在父級HTML模板中，屬性名需要使用中划線寫法 -->
<p class="content">頁面1</p>
<router-link to="/page2" tag="span" class="btnRouter">頁面2</router-link>
<BlankPage id="BlankPage1"></BlankPage>
<!-- 多個組件引入同一組件改變顯示/隱藏狀態時，需綁定指定id，否則多個組件會混亂 -->
</div>
</script>
<script type="text/x-template" id="page2">
<div>
<TopNav :show-btn="ifShow"></TopNav>
<p class="content">頁面2</p>
<BlankPage id="BlankPage2"></BlankPage>
</div>
</script>
</body>
</html>
1.js
$(document).ready(function() { Vue.prototype.$show = function(obj) { //全局函數1 var o = $(obj); o.css('display', 'block'); }; Vue.prototype.$hide = function(obj) { //全局函數2 var o = $(obj); o.css('display', 'none'); }; Vue.use(VueRouter); // 頂部組件 start var TopNav = Vue.extend({ data() { return { showBtn: false } }, props: ['showBtn'], watch: { showBtn: function(newVal, oldVal) { this.showBtn = newVal; } }, template: "<p class='title'> " + "<span>頂部組件</span>" + "<span v-show='showBtn' class='btnBack' @click='$router.back(-1)'>返回</span>" + "</p>" }) /* 子級props屬性聲明時，使用小駝峰或者中划線寫法都可以； 而子級模板使用從父級傳來的變量時，需要使用對應的小駝峰寫法 */ // 頂部組件 end // 正在加載組件 start var BlankPage = Vue.extend({ template: "<div class='BlankPage'>" + "<div class='loadingDiv'>" + "<p class='loadingIcon'>" + "<img src='img/load.gif' alt=''>" + "</p>" + "<p class='loadingTxt'>正在加載...</p>" + "</div>" + "</div>" }) // 正在加載組件 end // 頁面1 start var Page1 = Vue.extend({ data() { return { ifShow: false } }, template: "#page1", // 局部注冊子組件 components: { TopNav, BlankPage } }) //頁面1 end //頁面2 start var Page2 = Vue.extend({ data() { return { ifShow: true } }, template: "#page2", components: { TopNav, BlankPage } }) //頁面2 end var router = new VueRouter({ routes: [{ path: '/', name: 'Page1', meta: { index: 0, keepAlive: true, title: '頁面1' }, component: Page1 }, { path: '/page2', name: 'Page2', meta: { index: 1, keepAlive: false, title: '頁面2' }, component: Page2 } ] }) router.beforeEach((to, from, next) => { var toDepth = to.meta.index; var fromDepth = from.meta.index; if (to.meta.title) { document.title = to.meta.title; } if (toDepth == 'undefined' || toDepth == undefined) { if (true) { //這個可以關閉安卓系統的手機 document.addEventListener('WeixinJSBridgeReady', function() { WeixinJSBridge.call('closeWindow'); }, false); //這個可以關閉ios系統的手機 WeixinJSBridge.call('closeWindow'); // wx.closeWindow(); } return; } else if (toDepth < fromDepth) { //返回 from.meta.keepAlive = false; to.meta.keepAlive = true; } next() }) var app = new Vue({ el: '#app', router }).$mount('#app') })
1.css
@CHARSET "UTF-8"; body { width: 100%; height: 100%; } body, div, p { margin: 0; padding: 0; text-align: center; } .content { margin-top: 200px; } .title { position: fixed; top: 0; left: 0; width: 100%; height: 60px; padding-left: 50px; line-height: .60px; display: flex; align-items: center; color: #fff; background-color: lightseagreen; z-index: 1; } .btnBack { margin-left: 50%; } .btnRouter { width: 100px; height: 30px; line-height: 30px; margin-top: 20px; display: inline-block; background-color: lightseagreen; color: #fff; border-radius: 10px; } .NoMore { font-size: 14px; color: #888; margin-top: 30px; text-align: center } #NoMore1, #NoMore2 { display: none; } .NoMoreTxt:before { content: ""; width: 100px; height: 1px; display: inline-block; margin-bottom: 5px; margin-right: 1px; background-color: #dadada; } .NoMoreTxt:after { content: ""; width: 100px; height: 1px; display: inline-block; background-color: #dadada; margin-bottom: 5px; margin-left: 10px; } #BlankPage1, #BlankPage2 { display: none; } .BlankPage { width: 100%; height: 100%; font-size: 14px; color: #fff; background-color: #fff; -webkit-transition: all .2s ease-out; transition: all .5s ease-out; transition: all .5s ease-out; transition: all .5s ease-out; position: fixed; top: 0; z-index: 12; } .loadingDiv { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 50px; } .loadingTxt { font-size: 14px; color: #666; text-align: center; } .loadingIcon { text-align: center; } .loadingIcon img { display: inline-block; width: 40%; height: 48px; }