vue-router(一)
<div class="li" @click="One()">One</div>
One: function () {
this.$router.push({
name:"one",
params:{
id:""
}
})
}
<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>
router:new VueRouter({
routes:[
{path:'/myLogin',component:testLogin},
{path:'/myRegister',component:testRegister}
]
})
跳转过度动画:
<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 === ? "slide-left":
animate === ? "slide-right":
animate === ? "slide-top":
animate === ? "slide-bottom":""
}
//当animate为1的时候页面想左滑动,2为右,3为上,4为下,0没有动画,
this.$router.animate = ;//恢复状态
// console.log(this.animate);
}
}
}
</script> <style>
* {
margin: ;
padding: ;
}
html,body {
width: %;
height: %;
font-size: .67vw;
}
.wraper {
width: %;
height: %;
}
.container {
width: %;
height: %;
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: %;
height: %;
}
//不同动画的c3样式
#view {
position: absolute;
left: ;
top: ;
width: %;
height: %;
transition: all .5s cubic-bezier(0.55, , 0.1, );
}
.slide-left-enter,
.slide-right-leave-active {
opacity: ;
transform: translate(%, );
}
.slide-left-leave-active,
.slide-right-enter {
opacity: ;
transform: translate(-%, );
}
.slide-top-enter,
.slide-bottom-leave-active {
opacity: ;
transform: translate(, %);
}
.slide-top-leave-active,
.slide-bottom-enter {
opacity: ;
transform: translate(, -%);
}
</style>
// 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 = ;//设置路由返回页面的动画方式
window.history.go(-);//返回一级页面
} Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
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,无动画效果
//通过给不同的路由设置不同的slide来实现页面不同入栈方式为1,2,3,4
export default new Router({
routes: [
{
path: '/',
name: '/',
component: Home
},
{
path: "/one",
name: "one",
meta: {
slide: ,
},
component: One,
},
{
path: "/two",
name: "two",
meta: {
slide: ,
},
component: Two
},
{
path: "/three",
name: "three",
meta: {
slide: ,
},
component: Three
}
]
})
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:""
}
})
},
Two: function () {
this.$router.push({
path:"/two",
query:{
id:""
}
})
},
Three: function () {
this.$router.push({
path:"/three",
query:{
id:""
}
})
},
}
}
</script>
<style scoped>
.section {
width: %;
flex: ;
overflow-y: auto;
overflow-x: hidden;
}
* {
font-size: 16px;
}
.main {
width: %;
height: .5rem;
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
.main div {
flex: ;
height: .5rem;
line-height: .5rem;
}
.main div:hover {
background-color: #;
}
.main div:nth-of-type() {
box-sizing: border-box;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
</style>
<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: #;
color: #fff;
}
.back:hover {
background-color: #;
}
</style>
<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: %;
height: .5rem;
line-height: .5rem;
background-color: #ccc;
border-bottom: 1px solid #ccc;
}
</style>
<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: %;
height: .5rem;
line-height: .5rem;
background-color: #ccc;
border-bottom: 1px solid #ccc;
}
</style>
params传参和接受参数
vue-router(一)的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
随机推荐
- [BZOJ1058]报表统计
Description 小Q的妈妈是一个出纳,经常需要做一些统计报表的工作.今天是妈妈的生日,小Q希望可以帮妈妈分担一些工 作,作为她的生日礼物之一.经过仔细观察,小Q发现统计一张报表实际上是维护一个 ...
- 设计模式——适配器(Adapter)模式
概述 什么是适配器?在我们生活中的适配器比如插头转换器(中标转美标).USB接口转换器(type-c转苹果),电脑电源适配器(交流电转低电压直流)等.像这种将两者有差异的东西通过适配器使他们成为相互适 ...
- Linux权限控制
文件属性 权限说明 文件用户组调 权限设置建议 文件属性 在shell环境里输入:ls -l 可以查看当前目录文件.如: drwxr-xr-x. 14 root root 4096 Apr 5 18: ...
- Generator 函数的语法
简介 § ⇧ 基本概念 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同.本章详细介绍 Generator 函数的语法和 API,它的异步编程应用请看< ...
- C++(三十二) — 常对象、常成员变量、常成员函数
常量:对于既需要共享.又需要防止改变的数据.在程序运行期间不可改变. const 修饰的是对象中的 this 指针.所以不能被修改. 1.常对象 数据成员值在对象的整个生存期内不能改变.在定义时必须初 ...
- Java连接MySQL数据库——代码
工具:eclipse MySQL5.7.17 MySQL连接驱动:mysql-connector-java-5.1.43.jar 加载驱动:我是用MAVEN进行管理 数据库连接信息: 数据库名称:wu ...
- Ansible 小手册系列 十(包含和角色)
一.包含 (include) 使用include模块来包含foo文件 tasks: - include: foo.yml --- foo.yml - name: test foo command: e ...
- label技巧
问题描述: 一般都用label的for属性指定label的点击范围: <label for="male"><input type="radio" ...
- Java复习1.基本知识
Java语言概述 20131003 开头语: 开发领域,重要的编程语言基本都是C/C++,然后就是Java, C/C++就不用说了,另外掌握Java对你是有很大的帮助的,而且也会扩宽你的择业范围.同时 ...
- C++11_ Variadic Templates
版权声明:本文为博主原创文章,未经博主允许不得转载. 这次主要介绍C++11的又一个新特性 Variadic Templates (可变模板参数) 它的实现类似于initializer_list< ...