精华内容
下载资源
问答
  • Vue实现页面跳转

    万次阅读 2018-06-17 17:20:20
    如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }" :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:"> ...

    如何点击底部书架跳转到对应的页面

    <router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
                 :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
                  <span class="tabNav-ico tabNav-book"></span>
                  <span class="tabNav-txt">书 架</span>
    
    </router-link>

    'name': 'bookshelf'表示要跳转的Vue组件名称,名称是在router文件下的index.vue中进行设置。

    {
         path: '/bookshelf',
         name: 'bookshelf',
         component: Bookshelf
    },

    params :{entityId: this.entityId}里面是要传递过去的参数。

    在bookshelf组件接收参数

    this.bookshelfId = this.$route.params.entityId;

    除了使用标签<router-link>进行跳转,还可以使用下面的方法

    <a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
          <span class="tabNav-ico tabNav-home"></span>
          <span class="tabNav-txt">首 页</span>
    
    </a>
    
    toIndex: function(){
            this.$router.push("/?entityId="+ localStorage.getItem("entityId"));
    
    }

    同样可以跳转页面,this.$router.push()方法只有一个参数的时候,代表跳转地址,还可以增加一个参数传值。

    写法:

    this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});

    接收参数:

    this.$route.params.title

    需要注意path不能和params一起使用,否则params将无效。需要用name来指定页面。

    或者通过path和query传递参数

    this.$router.push({path: '/book', query: {'id', this.id}})

    页面接收参数使用 this.$route.query.id

    展开全文
  • 主要介绍了vue页面跳转实现页面缓存操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 第一步、最大的index.html页面 添加如下代码目的http://localhost:8080/...也是子页面主要是构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器,它渲染的组件是你使用 vu...

    第一步、最大的index.html页面 添加如下代码

    目的

    http://localhost:8080/(等同于http://localhost:8080/index.html)是父页面

    其他的页面都是http://localhost:8080/路径名;也是子页面

    主要是构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的。

    cee607ff492ad1f5d883a60ba86384f5.png

    第二步、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 hd from './App'

    import ElementUI from 'element-ui'

    import 'element-ui/lib/theme-chalk/index.css'

    import router from './router/router.js'

    Vue.config.productionTip = false

    Vue.use(ElementUI)

    new Vue({

    router,

    el: '#app',

    render:h => h(hd)

    })

    第三步、App.vue文件

    第四步、router.js(本来是index.js,我改了名称)

    我的目录结构如下

    c2ad974c635401213e65f8055143f6e4.png

    router.js代码如下

    import Vue from 'vue'

    import Router from 'vue-router'

    import Head from '../components/head/Head'

    import hmd from '../components/head/Zmd'

    import ht from '../components/head/first'

    import first from '../components/common/first'

    import homd from '../components/home/Zmd'

    Vue.use(Router)

    export default new Router({

    mode: 'history',

    routes: [

    {

    path: '/head',

    name: 'Head',

    component: Head

    },

    {

    path: '/first',

    name: 'first',

    component: first

    },

    {

    path: '/hmd',

    name: 'hmd',

    component: hmd

    }, {

    path: '/homd',

    name: 'homd',

    component: homd

    }, {

    path: '/ht',

    name: 'ht',

    component: ht

    }

    , {

    path: '/',

    name: 'Head',

    component: Head

    }

    ]

    })

    第五步、实现路由跳转

    由于我定义http://localhost:8080/就是head文件夹里面的Head.vue里面的内容

    所以都是在这个Head.vue里面测试的

    6937f9a0b6b953473921a94d80d8e8f2.png

    components/head/Head.vue里面的内容如下

    d5448a0cf077ad34a00c1109cb38602e.png

    测试效果如下

    1a7bc8c96d86ee25fd681e0dbc1a6e06.png

    展开全文
  • 百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法,需要的朋友可以参考下
  • 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
  • vue 实现页面跳转

    千次阅读 2019-07-03 11:03:02
    的to属性实现跳转页面路径,我是给按钮添加跳转,看代码 <el-form-item> <el-button type="primary" @click="handleSearch">查询</el-button> <router-link to="/getAdv...

    只需要三个步骤:

    1. 使用<router-link>的to属性实现要跳转的页面路径,我是给按钮添加跳转,看代码

     <el-form-item>
         <el-button type="primary" @click="handleSearch">查询</el-button>
         <router-link to="/getAdvertising">
            <el-button type="primary">前往领取广告</el-button>
         </router-link>
    </el-form-item>

    效果图:

    2. 在route.js文件里定义路由,如图

    3.领取广告之后,提示领取成功,然后再跳转回我的广告页面,在方法的执行成功的代码块中添加这么一句即可:

    展开全文
  • vue页面跳转实现页面缓存

    千次阅读 2020-04-23 16:09:06
    打野在A页面野区进行一波骚操作打了一只蓝爸爸,然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸,然后他又回到A野区,希望A野区还是只有一只蓝爸爸被打的状态,其他野没被偷 第一步 在路由里面设置需要缓存的...

    业务需求
    打野在A页面野区进行一波骚操作打了一只蓝爸爸,然后点击导航栏跑到B页面的野区秀操作打了一只红爸爸,然后他又回到A野区,希望A野区还是只有一只蓝爸爸被打的状态,其他野没被偷
    第一步
    在路由里面设置需要缓存的页面
    在这里插入图片描述
    第二步
    使用keep-alive属性包裹需要缓存的页面使用v-if判断,为true的是需要缓存的,false是不需要缓存的
    在这里插入图片描述
    第三步在需要缓存的页面设置导航钩子,在A野区离开时将值设置为false保证离开当前野区不被偷
    在这里插入图片描述
    第四步
    在其他野区浪一波离开时设置为true,保证回到A野区的时候野区不被刷新,还是原来的状态
    在这里插入图片描述
    原理还在学习,目前只是转载别人的

    展开全文
  • 本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能,有这方便需要的朋友学习参考下吧。
  • 今天小编就为大家分享一篇vue实现跳转接口push 转场动画示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue 实现路由跳转时更改页面title,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 文章首发于个人博客,转载参考请注明来源用vue-cli快速搭建vue脚手架+实现vue页面跳转的小demo 微信小程序的页面跳转和生命周期函数[一个简单的 vue 页面跳转示例项目地址
  • 主要介绍了 Vue 页面跳转不用router-link的实现代码,文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下
  • vue 实现页面锚点跳转

    千次阅读 2020-03-04 11:16:32
    1.非跨页面的锚点跳转实现方法: <div class="content"> <a href="javascript:void(0)" @click="goAnchor()">gotoOther</a> </div> methods: { goAnchor() { var anchor = this.$el....
  • vue实现页面跳转的方式

    千次阅读 2019-08-18 22:30:31
    vue实现页面跳转的方式 1、使用路由:router-link 2、使用编程式导航:this.router.push(&quot;/&quot;)3、this.router.push(&quot;/&quot;) 3、this.router.push("/")3、this.router.go(1); ...
  • vue实现页面跳转过渡效果 当我们做移动端页面页面跳转时,不想让页面跳转的那么生硬,所以需要添加过渡效果 html部分(name=“fade” 这是关键一步,fade 是自定义class名的一个标识) <transition name=...
  • vue 实现页面跳转(vue第一篇)

    千次阅读 2020-02-28 14:03:11
    首先实现登录按钮的跳转,先对index.js进行如下修改: 然后打开我的login.vue文件,找到中的登录相关代码,在中添加@click,并在其中写入方法login 然后在 < script>中的method里补全l...
  • 主要介绍了vue实现未登录跳转到登录页面的方法,主要目的是实现未登录跳转,需要的朋友参考下吧
  • vue 使用跳转页面到指定位置。 写在$nextTick方法中,前俩句先初始化这个滑动组件,下面是定义滑动的距离
  • vue 路由跳转页面传参和该页面获取参数方式 一、实现页面功能效果 二、页面代码实现 三、js代码 <script> import { getOneDormInfo, getDormsPerson} from '@/api/appGrade' export default { methods:{ ...
  • bianji.vue(编辑页面——form表单,得到table里给传过来的值) table.vue 要传参的页面: 如下:在methods:{ 写修改的方法} 两种方法传参, 第一种传参 name 与 结合使用params ,第二种传参 path 与 ...
  • 主要介绍了vue实现几秒后跳转页面代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue+elementUI实现跳转页面改变导航样式我是先单独建了一个vue页面 header.vue首先是.vuejs模块当然要配置好路由才可以生效最后使用的时候直接引入就可以了 我是先单独建了一个vue页面 header.vue 首先是.vue <...
  • Vue实现登录跳转

    2019-04-03 16:36:44
    Vue实现登录功能,可以简单的登录跳转,菜单栏以及标题栏的制作,包含退出登录~
  • vue页面跳转

    千次阅读 2018-07-27 13:47:57
    真是百度了好久都没办法实现vue中一个页面跳到另一个页面,甚至到google上搜索也是没办法的,最终还是找了高人亲自指导,原来怎么都无法跳出App.vue,其实App.vue是渲染的主页面根本没办法跳出来啊,可以把组件内容放...
  • 搭建VUE项目(三)VUE项目实现页面跳转

    万次阅读 多人点赞 2018-06-27 10:26:17
    打开一个VUE项目,目录结构是这样的:如现在有两个页面aaa和HelloWorld,路由配置在index.js中:import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import ...
  • vue实现页面跳转并传参的八种方法

    千次阅读 2019-10-10 21:19:22
    我们知道,在vue中每个页面都需要在路由中声明,就是在router/index.js中写下面代码: import Vue from 'vue' import Router from 'vue-router' import Test from "../components/Test"; Vue.use(Router) export ...
  • vue项目跳转页面在IE浏览器不生效 vue项目在跳转页面时,地址栏显示跳转路径却不跳转,只需要在项目里的src目录下找到App.vue文件,并在文件内的name:'app'下添加以下代码。 export default { name: 'app', ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,233
精华内容 12,893
关键字:

vue实现跳转页面

vue 订阅