前端路由:
前端路由主要是使用Hash （....#/login）進行路由切換的，不會重新整理頁面，類似于頁面中的錨連結，隻是在單頁面中進行切換，并不會向後端發送請求。
可以再router中設定屬性mode 為 "history" 使得路由程式設計 /login.
後端路由：
後端路由主要是沒有路由都會向後端發送請求,都會重新整理頁面
npm 安裝：
npm install vue-router
//在對應的子產品中将其綁定到Vue上。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) 任何元件内通路路由器：this.$router，就是整個的路由對象；
通路目前路由：this.$route；
1.元件的路由切換
<div id="app">
<!-- 使用router-link 代替原本的a連結 tag表示最終渲染成的标簽 同時具備了點選切換元件的功能 -->
<router-link to="/login" tag="span">登入</router-link>
//除了使用router-link來定義導航連接配接，還可以使用router的執行個體方法：
// this.$router.push(location,onComplete?,onAbort?) //類似window.location.href,向histroy棧中添加一個新的
// 帶查詢參數，變成 /register?plan=private
//router.push({ path: 'register', query: { plan: 'private' }}) //toute <router-link to="/register" tag="a">注冊</router-link>
<!-- 切換的元件的占位符 ，顯示切換到的元件-->
<router-view></router-view>
</div>
<template id="login">
<h3>登入</h3>
</template>
<template id="register">
<h3>注冊</h3>
</template>
<script>
var login = {
template:"#login",
}
var register = {
template:"#register"
}
const router = new VueRouter({
routes:[ // component中的login是子元件對象，不是字元串。
{path:"/",redirect:"/login"}, //設定預設路由 重定向
{path:"/login",component:login, alias: '/b'}, //alias 起别名 使用/b 和使用/login的作用一樣 都會跳轉到login元件上。
{path:"/register",component:register,name:"register"},
//<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
{path:"*"} //比對所有路徑，一般放到最後，比對404檔案
{path：“/user-*”}//比對所有以 /user-開頭的路徑
// 路徑放置的順序會影響比對
]
})
new Vue({
el:"#app",
data:{
},
components:{
login,register
},
// 将路由和Vue執行個體實作綁定。
router:router,//也可直接 router,
})
2.路由嵌套
<div id="app">
<h3>首頁</h3>
<router-link to="/main">main頁面</router-link>
//maink元件的占位
<router-view></router-view>
</div>
<template id="maink">
<div>
<h3>main</h3>
//router-link中的位址必須是絕對位址/main/login，如果是login則會跳轉到/login下。
//子元件被切換的時候，并不會銷毀原來的所有元件，而是複用了其他元件隻銷毀了子元件。
//也就是說/mian/login跳轉到/main/register的時候，/main元件并不會重新的建構或是重新的調用created函數。
<router-link to="/main/login" >登入</router-link>
<router-link to="/main/register">注冊</router-link>
<transition name="my" mode="out-in">
// 登入或是注冊元件的占位
<router-view></router-view>
</transition>
</div>
</template>
<template id="login">
<h3>登入</h3>
</template>
<template id="register">
<h3>注冊</h3>
</template>
<script>
var maink = { //template的id值不能和DOM的标簽一樣
template:"#maink",
}
var login = {
template:"#login",
}
var register = {
template:"#register"
}
const router = new VueRouter({
routes:[
{
path:"/main",
component:maink,
children:[//子路由
{
path:"login",//注意不是從根目錄開始的 不加斜杠
component:login,
},{
path:"register",
component:register
}
]
},
]
})
new Vue({
el:"#app",
data:{
},
components:{
login,register,
maink
},
// 将路由和Vue執行個體實作綁定。
router:router,//也可直接 router,
}) 3.路由傳值
<div id="app">
<router-link to="/login?id=99&name=zzzz">登入</router-link>
<router-link to="/register/444">注冊</router-link>
<router-view></router-view>
</div>
<template id="login">
<div>
// 當直接在連結中使用?來進行Key value的拼接的時候，在元件中通過 $route.query 來接收要查詢的資料 無需修改路由驗證規則
<h3>登入=------{{this.$route.query.name}}</h3>
</div>
</template>
<template id="register">
<div>
// 當在連接配接中使用 /register/444 這樣的路由的時候，并且需要修改router中的路由規則/register/:id，使用$route.params來擷取資料
<h3>注冊------{{this.$route.params.id}}</h3>
</div>
</template>
<script>
var login = {
template:"#login",
}
var register = {
template:"#register",
}
const router = new VueRouter({
routes:[
{ path:"/login", component:login },
{ path:"/register/:id", component:register },
//還可利用props進行解耦，而不是使用$router擷取參數
//https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%87%BD%E6%95%B0%E6%A8%A1%E5%BC%8F
]， linkActiveClass:"myactive", //點選切換元件的是時候 連接配接高亮 "myactive" 自定義類選擇器
})
new Vue({
el:"#app",
data:{
},
components:{
login,register
},
// 将路由和Vue執行個體實作綁定。
router:router,//也可直接 router,
})
</script>
4.命名視圖
<div id="app">
<router-view></router-view>
<!-- 名字和components中的一樣 -->
<router-view name="left"></router-view>
<router-view name="right"></router-view>
</div>
<template id="top">
<div>
<h3>top</h3>
</div>
</template>
<template id="left">
<div>
<h3>left</h3>
</div>
</template>
<template id="right">
<div>
<h3>right</h3>
</div>
</template>
<script>
var top1 = { //top 也不可以作為元件對象名
template:"#top",
}
var left = {
template:"#left",
}
var right = {
template:"#right"
}
const router = new VueRouter({
routes:[
{
path:"/",
components:{ //是個components對象
default: top1,
left:left,
right:right,
}
},
],
})
new Vue({
el:"#app",
data:{
},
components:{
top,left,right
},
// 将路由和Vue執行個體實作綁定。
router:router,//也可直接 router,
})
</script> 5.導航守衛
//router.js
//參數和查詢的改變并不會觸發進入和離開的導航守衛
//全局前置守衛，是異步解析執行
//to 将要進入的路由對象 路由對象
// from 目前導航正要離開的路由 路由對象
// next 函數 參數 false 空參數 next('/') 或者 next({ path: '/' }): 跳轉到一個不同的位址 是必須調用的函數
router.beforeEach((to, from, next)=>{
//可以做攔截器
//有問題
if(to.path === "/mine"){ //在這裡可能會出現溢出的情況，需要認真看。https://www.jianshu.com/p/1187f8f74a72
next('/home');
}
next();
})
//後置守衛
router.afterEach((to, from) => {
//和前置守衛參數基本一樣
})
//路由獨享守衛
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
}}
鈎子函數的調用時機：
//在切換元件的時候，
1.導航被觸發
2.失效的元件調用 beforeRouteLeave
3.全局的beforeEach
4.重用的元件beforeRouteUpdate
5.全局beforeEnter
6.解析元件
7.激活元件的beforeRouteEnter
8.全局的beforeResolve
9.導航被确認
10.全局的afterEach
11.更新DOM