vue-router（一）

vue路由再vue開發的項目中能夠說是一個必用的組件，而這個部分的水卻依舊很深，今天咱們深刻分析其內部的東西，先看這樣一個效果：

你們 能夠看到上圖中，咱們經過兩種方式實現了一個vue路由跳轉的過分動畫醫技頁面的參數的傳遞。

跳轉方式及傳參：

vue跳轉方式一共有三種：編程式跳轉和router-link跳轉和router-view三種方式，

1.編程式跳轉

寫法：

<div class="li" @click="One()">One</div>
One: function () {
    this.$router.push({
        name:"one",
        params:{
            id:"0"
        }
    })
}

 

主要經過點擊事件經過push方法來添加路由地址

2.router-link跳轉

寫法：

<router-link class="li" :to="{name:'one',params:{id:'0'}}" tag="div">One</router-link>
<router-link class="li" :to="{path:'/two',query:{id:'1'}}" tag="div">Two</router-link>
<router-link class="li" :to="{path:'/three',query:{id:'2'}}" tag="div">Three</router-link>

3.router-view

通常咱們主要用在路由主入口，用到的很少，傳參咱們通常再也不這中方式下 進行傳參。

寫法：

router:new VueRouter({
            routes:[
              {path:'/myLogin',component:testLogin},
      {path:'/myRegister',component:testRegister}
            ]
        })

跳轉過分動畫：

咱們能夠看到新的頁面再入棧時，頁面會從左側滑動出現，頁面出棧會向又滑動出棧，咱們還能夠實現向上或向下的滑動等等過分效果。

首先咱們來看上述效果的目錄結構：

開始前的準備，我也就很少說了，安裝vue腳手架，而後npm run dev啓動項目，建立文件目錄如上圖，不過須要注意的是，在開始的時候咱們須要將vue-router下載下載，記得選擇yes哦

動畫開始咱們先了解這樣一個屬性<transition :name=""></transition>這個屬性是vue中專門用來設置動畫的一個標籤，經過設置不能的 name改變其動畫的實現方式。

App.vue:

<template>
<div id="app">
<transition :name="animate">
<router-view id="view"></router-view>
</transition>
</div>
</template>
 
<script>
export default {
name: 'App',
data () {
return {
animate: "",
}
},
watch: {
//to爲下個頁面，from爲源路由。經過再路由的配置中將頁面的入棧方式設置爲1.再頁面出棧的時候設置爲2
$route: function(to,from) {
/*
0: 不作動畫
1: 左切換
2: 右切換
3: 上切換
4: 下切換
*/
let animate = this.$router.animate || to.meta.slide;
if(!animate) {
this.animate = ""
} else {
this.animate =
animate === 1? "slide-left":
animate === 2? "slide-right":
animate === 3? "slide-top":
animate === 4? "slide-bottom":""
}
//當animate爲1的時候頁面想左滑動，2爲右，3爲上，4爲下，0沒有動畫，
this.$router.animate = 0;//恢復狀態
// console.log(this.animate);
}
}
}
</script>
 
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
font-size: 26.67vw;
}
.wraper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background-color: #ffff;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
width: 100%;
height: 100%;
}
//不一樣動畫的c3樣式
#view {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
opacity: 0;
transform: translate(100%, 0);
}
.slide-left-leave-active,
.slide-right-enter {
opacity: 0;
transform: translate(-100%, 0);
}
.slide-top-enter,
.slide-bottom-leave-active {
opacity: 0;
transform: translate(0, 100%);
}
.slide-top-leave-active,
.slide-bottom-enter {
opacity: 0;
transform: translate(0, -100%);
}
</style>

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
 
// 全局路由返回，再頁面返回上級頁面時，能夠經過調用back方法返回上級頁面
Vue.prototype.back = (route) =>{
route.animate = 2;//設置路由返回頁面的動畫方式
window.history.go(-1);//返回一級頁面
}
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

 

router.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from "@/views/home/index"
import One from "@/views/one/index"
import Two from "@/views/two/index"
import Three from "@/views/three/index"
Vue.use(Router);
Router.prototype.animate = 0;//給全部的路由設置動畫初始化爲0，無動畫效果
//經過給不一樣的路由設置不一樣的slide來實現頁面不一樣入棧方式爲1,2,3,4
export default new Router({
routes: [
{
path: '/',
name: '/',
component: Home
},
{
path: "/one",
name: "one",
meta: {
slide: 1,
},
component: One,
},
{
path: "/two",
name: "two",
meta: {
slide: 1,
},
component: Two
},
{
path: "/three",
name: "three",
meta: {
slide: 1,
},
component: Three
}
]
})

 

以上就是主要代碼，下面爲頁面的layout不是理解的重點：

home/index.vue
<template>
<div class="wraper">
<div class="container">
<div class="section">
<h3>這裏是首頁</h3>
<h3>編程式跳轉</h3>
<div class="main">
<!--編程式路由跳轉-->
<div class="li" @click="One()">One</div>
<div class="li" @click="Two()">Two</div>
<div class="li" @click="Three()">Three</div>
</div>
<h3>router-link跳轉</h3>
<div class="main">
<!--編程式路由跳轉-->
<router-link class="li" :to="{name:'one',params:{id:'0'}}" tag="div">One</router-link>
<router-link class="li" :to="{path:'/two',query:{id:'1'}}" tag="div">Two</router-link>
<router-link class="li" :to="{path:'/three',query:{id:'2'}}" tag="div">Three</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
One: function () {
this.$router.push({
name:"one",
params:{
id:"0"
}
})
},
Two: function () {
this.$router.push({
path:"/two",
query:{
id:"1"
}
})
},
Three: function () {
this.$router.push({
path:"/three",
query:{
id:"2"
}
})
},
}
}
</script>
<style scoped>
.section {
width: 100%;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
* {
font-size: 16px;
}
.main {
width: 100%;
height: .5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.main div {
flex: 1;
height: .5rem;
line-height: .5rem;
}
.main div:hover {
background-color: #999988;
}
.main div:nth-of-type(2) {
box-sizing: border-box;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
</style>

 

 

one/index.vue

<template>
<div class="wraper">
<div class="container">
<div class="back" @click="back($router)">Back（返回上一級頁面）</div>
<h3>這裏One頁面</h3>
<h3>首頁傳過來{{msg}}</h3>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ""
}
},
methods: {
getParams() {
this.msg = this.$route.params.id;
}
},
mounted() {
this.getParams();
},
watch: {
'$route': 'getParams'
}
}
</script>
<style scoped>
* {
font-size: 16px;
}
.back {
height: .5rem;
line-height: .5rem;
border-bottom: 1px solid #ccc;
background-color: #999;
color: #fff;
}
.back:hover {
background-color: #999;
}
</style>

 

two/index.vue

<template>
<div class="wraper">
<div class="container">
<h3>這裏是Two頁面</h3>
<h3>首頁傳過來{{msg}}</h3>
<div class="back" @click="back($router)">Back（返回上一級頁面）</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ""
}
},
methods: {
getParams() {
this.msg = this.$route.query.id;
}
},
mounted() {
this.getParams();
},
watch: {
'$route': 'getParams'
}
}
</script>
<style scoped>
* {
font-size: 16px;
}
.back {
width: 100%;
height: .5rem;
line-height: .5rem;
background-color: #ccc;
border-bottom: 1px solid #ccc;
}
</style>

 

three/index.vue

<template>
<div class="wraper">
<div class="container">
<h3>這裏是Two頁面</h3>
<h3>首頁傳過來{{msg}}</h3>
<div class="back" @click="back($router)">Back（返回上一級頁面）</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: ""
}
},
methods: {
getParams() {
this.msg = this.$route.query.id;
}
},
mounted() {
this.getParams();
},
watch: {
'$route': 'getParams'
}
}
</script>
<style scoped>
* {
font-size: 16px;
}
.back {
width: 100%;
height: .5rem;
line-height: .5rem;
background-color: #ccc;
border-bottom: 1px solid #ccc;
}
</style>

 

以上就爲效果圖的完整demo code，源碼的閱讀相信你們就會明白實現的原理。這裏咱們還須要瞭解這樣一個知識點：

路由間傳參的傳遞與接受：

頁面參數的傳遞中能夠經過params和query來實現參數的傳遞，見one/index.vue  那麼這兩種方式具體有什麼區別呢？

query傳參和接受參數

傳參: this.$router.push({ path:'/xxx', query:{ id:id } }) 接收參數: this.$route.query.id

params傳參和接受參數

傳參: this.$router.push({ name:'xxx',  params:{ id:id } }) 接收參數: this.$route.params.id

這裏咱們須要注意的是： 

    

    另外，兩者還有一個區別，直白的說query傳遞的參數至關於get請求，參數會在地址欄裏看得見，二params至關於post地址欄中沒法看見

 

到這裏路由的基本的知識點總結完了，可是還有許多咱們須要知道的子路由，導航守衛等官方 文檔傳送門：https://router.vuejs.org/zh/guide/advanced/transitions.html#%E5%8D%95%E4%B8%AA%E8%B7%AF%E7%94%B1%E7%9A%84%E8%BF%87%E6%B8%A1

 

 

 

做者： 狗尾草

個性簽名：海到無邊天做岸，山登絕頂人爲峯！