## :-: vue - router 方法
```
// 跳轉到指定路徑 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步
```
## :-: 導航守衛
```
export default {
// beforeRouteEnter -- 當路由切換進來的時候觸發
beforeRouteEnter(to, from, next) {
// 要注意:此時組件沒有完全加載好,所以拿不到this。 this === undefined
next(vm => {
// 通過這種方式(回調)就可以拿到this了、
// console.log(vm);
});
},
// beforeRouteLeave -- 當路由將要被切換到別的頁面時攔截觸發 (導航守衛)
beforeRouteLeave(to, from, next) {
// to -- 包含要去到的路徑信息
// from -- 包含當前路徑的信息
// next -- 是否要進行跳轉、 next() -- next執行就表示跳轉,不執行就不調轉、
// console.log(to, from, next);
!this.name ? next() : confirm("表單還有內容,請問要放棄不保存了嗎?") && next();
},
// beforeRouteUpdate -- 當路由被改變時觸發
beforeRouteUpdate(to, from, next) {
// console.log(to, from, next);
// -- this.getData(to.params.id);
next();
},
};
```
```
beforeRouteEnter -- 當路由切換進來的時候觸發
beforeRouteLeave -- 當路由將要被切換到別的頁面時攔截觸發 (導航守衛)
beforeRouteUpdate -- 當路由被改變時觸發
to -- 包含要去到的路徑信息
from -- 包含當前路徑的信息
next -- 是否要進行跳轉、 next() -- next執行就表示跳轉,不執行就不調轉、
```
## :-: vue - 動態路由配置
```
{
// 動態路由
path: '/question/:id',
name: 'question',
component: () => import ('./views/Question')
}
<!-- :to="{name:'question',params:{id:index}}" -- 動態路由 -->
<!-- :to="{name:'question',query:{id:index}}" -- ?id=123 -->
<router-link
tag="tr" :to="{name:'question',query:{id:index}}"
v-for="(item,index) in jsonArr" :key="index">
<th class="text-center">{{index+1}}</th>
<td class="text-center">{{item[0]}}</td>
<td class="text-center">{{item[2]}}</td>
</router-link>
```
## :-: 全局守衛 (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();
})
```
## :-: vue - router (路由插件基本配置)
:-: main.js (配置主入口文件)
```
import Vue from 'vue'
import App from './App.vue'
import router from './router.js'
Vue.config.productionTip = false
new Vue({
router, render: h => h(App)
}).$mount('#app');
```
:-: router.js (配置)
```
import Vue from 'vue';
import Router from 'vue-router';
// 可以省略.vue的后綴
import Home from './views/Home';
// Vue.use(Router); -- 使路由插件生效
// $router -- 路由方法 $route -- 路由屬性
Vue.use(Router);
export default new Router({
// mode -- 切換路由的模式(hash、history)
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Home
}, {
path: '/learn',
name: 'learn',
// 分頁懶加載
component: () =>
import ('./views/Learn')
},
{
path: '/student', name: 'student', component: () => import ('./views/Student')
},
{
path: '/about', name: 'about', component: () => import ('./views/About')
},
{
path: '/community', name: 'community', component: () => import ('./views/Community')
}
]
});
```
:-: App.vue (在主模塊中的運用)
```
<template>
<div id="app">
<ul id="nav">
<!-- router-link -- 用于跳轉的組件 -->
<!-- router-link 默認會被渲染成 a標簽 通過添加 tag="li" 使其規定渲染成指定的標簽(li) -->
<router-link tag="li" to="/">Home</router-link>|
<!-- 還可以將 to="/learn" 寫成 :to="{path:'/learn'}" 或 :to="{name:'learn'}" 效果一樣 -->
<router-link tag="li" to="/learn">Learn</router-link>|
<router-link tag="li" to="/student">Student</router-link>|
<router-link tag="li" to="/about">About</router-link>|
<router-link tag="li" to="/community">Community</router-link>
</ul>
<!-- router-view -- 切換路徑時所展示的組件 -->
<router-view />
</div>
</template>
<style>
*{ margin:0; padding:0; box-sizing:border-box; }
#app{ background:#f0fbff; min-height:100vh; }
#nav{ background:#95bfcc; display:flex; flex-wrap:nowrap; line-height:50px; cursor:default; }
ul#nav>li{ list-style:none; padding:0 30px; cursor:pointer; }
</style>
```
:-: 各分頁模塊

```
<template>
<div>
···
</div>
</template>
<script>
export default {
···
};
</script>
<style>
···
</style>
```
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request