## :-: [Vue CLI3.0 中使用jQuery 和 Bootstrap - 簡書](https://www.jianshu.com/p/0d0c1eaeb877) ## :-: vue - router Demo :-:  :-: main.js ``` import Vue from 'vue' import App from './App.vue'; import router from './router.js'; import './plugins/axios'; // vue add vuex -- 數據倉庫 //在這里引入 bootstrap。默認只引入 bootstrap 中的 js，css 需要另外引入，我的 bootstrap.ss 在APP.vue中引入的 import "bootstrap"; //也可以在這里引入 bootstrap.css ; import "bootstrap/dist/css/bootstrap.min.css"; import x2js from 'x2js' //xml數據處理插件 import store from './store' Vue.prototype.$x2js = new x2js() //創建x2js對象，掛到vue原型上 Vue.config.productionTip = false; // 全局守衛 (main.js) // 進頁面前觸發 router.beforeEach((to, from, next) => { // if (['student', 'academic'].includes(to.name)) return; // some every let needLogin = to.matched.some(ele => ele.meta && ele.meta.login === true); if (needLogin) { // 判斷是否需要登陸 let isLogin = document.cookie.includes('login=true'); if (isLogin) { next(); } else { isLogin = window.confirm('該頁面需要登陸后才能訪問 ~'); if (isLogin) { next('/login'); } // 需要登陸 } } else { next(); } }); // // 解析完畢執行 // router.beforeResolve((to, from, next) => { // // to and from are both route objects. must call `next`. // // next(); // }) new Vue({ router, store, render: h => h(App) }).$mount('#app'); ``` :-: router.js ``` import Vue from 'vue'; import Router from 'vue-router'; import Home from './views/Home'; // Vue.use(Router); -- 使路由插件生效 // $router -- 路由方法 $route -- 路由屬性 Vue.use(Router); export default new Router({ // mode -- 切換路由的模式(hash、history) // mode: 'hash', mode: 'history', // linkExactActiveClass -- 修改路由按鈕被選中所添加的class值、 // linkExactActiveClass: 'abc', routes: [ // { // path: '/', // // redirect -- 重定向 // redirect: '/home', // }, { // path: '*' -- 解釋：當URL路徑沒有被匹配上的時候才會執行該方法、 path: '*', // redirect -- 重定向(string,object) redirect(to) { // 路徑優化 // console.log(to); if (to.path === '/') { return '/home'; } else { return '/error'; } // 跳轉到指定路徑 push、replace // this.$router.push('/home'); // 添加 [a, b, c] => [a, b, c, d] // this.$router.replace('/home'); // 完全替換 [a, b, c] => [a, b, d] // go -- 刷新(0)、前進(1)、后退(-1) // this.$router.go( -2 ); // 后退2步 } }, { path: '/home', name: 'home', component: Home, // 路由獨享守衛 // beforeEnter(to, from, next) { // // next(); // } }, { path: '/community', name: 'community', component: () => import ('./views/Community'), // redirect -- 重定向 redirect: '/community/academic', // 路由元信息 meta: { login: true }, // 二級路由 children: [{ // path: '/community/academic' 可以省略成 path: 'academic' path: 'academic', name: 'academic', component: () => import ('./views/Academic'), }, { path: 'download', name: 'download', component: () => import ('./views/Download'), }, { path: 'personal', name: 'personal', component: () => import ('./views/Personal'), }] }, { path: '/learn', name: 'learn', // 分頁懶加載 component: () => import ('./views/Learn'), }, { path: '/student', name: 'student', // 路由元信息 meta: { login: true }, component: () => import ('./views/Student') }, { path: '/about', name: 'about', component: () => import ('./views/About') }, { path: '/error', name: 'error', component: () => import ('./views/Error') }, { // 動態路由 path: '/question/:id', name: 'question', component: () => import ('./views/Question') }, { path: '/login', name: 'login', component: () => import ('./views/Login') } ] }); ``` :-: App.vue ``` <template> <div id="app" class="container"> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" > <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <router-link class="navbar-brand" to="/home">Brand</router-link> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <router-link to="/learn">課程學習</router-link> </li> <li> <router-link to="/student">學員展示</router-link> </li> <li> <router-link to="/about">關于</router-link> </li> <li> <router-link to="/community">社區</router-link> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!-- <router-view /> -- 切換路徑時所展示的組件 --> <router-view :jsonArr="jsonArr" /> </div> </template> <script> export default { data() { return { jsonArr: [] }; }, mounted() { //在頁面加載完畢后初始化 tooltip， 相當于$(function(){ $('[data-toggle="tooltip"]').tooltip(); } $('[data-toggle="tooltip"]').tooltip(); this.$axios .get("https://api.bootcdn.cn/libraries.min.json") .then(({ data }) => { this.jsonArr = data || []; }); } }; </script> <style lang="less"> #app .router-link-active { color: #fff; } </style> ``` :-: views (頁面組件列表)  :-: Community.vue (二級路由) ``` <template> <div class="community"> <!-- html --> <ul id="nav"> <router-link tag="li" to="/community/academic">學術討論</router-link> <router-link tag="li" :to="{path:'/community/download'}">資源下載</router-link> <router-link tag="li" :to="{name:'personal'}">個人中心</router-link> </ul> <router-view :jsonArr="jsonArr"></router-view> </div> </template> <script> export default { props: ["jsonArr"] }; </script> <style lang="less"> * { margin: 0; padding: 0; box-sizing: border-box; } #nav { margin: 0; cursor: default; li { background: #55a0c3; display: inline-block; line-height: 35px; padding: 0 20px; color: #fff; cursor: pointer; } .router-link-active { background: #6ba7c3; } } </style> ```