码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router(一)

时间:2018-08-27 18:11:42      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:set   routes   main   还需要   class   ash   没有   size   padding   

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-link
一般我们主要用在路由主入口,用到的不多,传参我们一般不再这中方式下 进行传参。
写法:
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
 
 
 

vue-router(一)

标签:set   routes   main   还需要   class   ash   没有   size   padding   

原文地址:https://www.cnblogs.com/bgwhite/p/9542870.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!