精华内容
下载资源
问答
  • vue点击按钮跳转页面
    2022-08-06 16:28:56

     1.给按钮添加点击事件

    <button @click="register">登录</button>
    

    2.实现跳转 在methods里面写入一下代码

    register () {
          //跳转到上一次浏览的页面
          this.$router.go(-1)
    
          //指定跳转的地址
          this.$router.replace('/将要跳转的路由名称')
    
          //指定跳转的路由的名字下
          this.$router.replace({name:'指定路由名称'})
    
          //通过push进行跳转
          this.$router.push('/将要跳转的路由名称')
        }
    

    3.通过 <router-link to=""></router-link>跳转

    <router-link :to="
       path:' index.js 里面配置的路由路径',
    或者
       name:' index.js 里面配置路由 name'
    ">点我跳转</router-link>

     

    更多相关内容
  • Vue点击按钮跳转页面的实现方法

    千次阅读 2021-09-02 16:10:57
    1、跳转外部链接并覆盖当前页 <el-button type="primary" @click="cimsInputClick">...2、跳转不覆盖当前页面,在新窗口打开 <el-button type="primary" @click="cimsInputClick">应用入口&l

    1、跳转外部链接并覆盖当前页

    <el-button type="primary" @click="cimsInputClick">应用入口</el-button>
    cimsInputClick () {
          window.location.href = 'https:\\www.mscims.com'
        }
    

    2、跳转不覆盖当前页面,在新窗口打开

    <el-button type="primary" @click="cimsInputClick">应用入口</el-button>
    cimsInputClick () {
          window.open('https:\\www.mscims.com', '_blank')
        }
    

    3、页面中内部跳转

    this.$router.push()实现。
    
    展开全文
  • 本文实例为大家分享了vue点击按钮实现页面切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title></title> [removed]...
  • vue点击按钮跳转到详情页

    千次阅读 2019-11-12 19:47:58
    还是以乐队与音乐家为例,我们熟知当我们想要点击跳转时,有时候自然地想到了a标签,但是在vue中貌似不适用 旧页面中则只有这一步操作router-link就是点击跳转,接下来就来到了新页面 <template> <div id...

    还是以乐队与音乐家为例,我们熟知当我们想要点击跳转时,有时候自然地想到了a标签,但是在vue中貌似不适用
    在这里插入图片描述
    旧页面中则只有这一步操作router-link就是点击跳转,接下来就来到了新页面

    <template>
      <div id="app1">
        <table border="1">
          <tr>
            <td>音乐家</td>
          </tr>
          <tr v-for="item in items">
            <td>{{item.name}}</td>
          </tr>
        </table>
      </div>
    </template>
    
    <script>
      import axios from 'axios'
    
    export default {
      name: 'zhanshiyinyuejia',
      data () {
        return {
          items: [],
          id:this.$route.params.id,
          // 这里的id就是接收旧页面传递过来的id,方法就是这么接收的this.$route.params.id,
          // 白色的id就是对应的前面旧页面的params:{id(这个id):item.id【这里就是接收后台查询传递的id赋值给了前面】}}
          // 到这vue界面的跳转完成了,接下来就可以执行下面axios像后端发送数据的操作了,因为这里的逻辑是点击乐队查看乐队下的
        // 音乐家,在执行点击时就携带了乐队id传到了新页面,()然后根据id值去查这个id下的所有人,那么就需要axios以POST方式将id
        // 传到后台,,,传送id的方式就是axios里的data里的this.id也就是“id:this.$route.params.id,”这句话赋值的id
    
          // 而axios里的data里的this.id 赋值的id就是往后台发送的id,需要django用request.data['id'],这时就直接来到了django了
        }
      },
      mounted () {
        axios({
          url: '/api/zhanshiyinyuejia/',
          method: 'post',
          data:{
            id:this.id
          }
    
        }).then(res=>{
          this.items = res.data.data
        })
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    

    要跳转的新页面的操作
    在这里插入图片描述
    关系对应图
    在这里插入图片描述
    已经发送了后端,接下来就是来到了后端

    class zhanshiyinyuejiaView(APIView):
        def post(self,request):
            data=request.data['id']
            # 这是获取前面axios里data里this.id赋给变量名id的值
            yuedui = Yuedui.objects.filter(id= data).first()
            # 虽然已经获取到了id那么还得需要查询一下数据库里是不是有这条id,查询完后赋值给变量名’yuedui‘
            yinyuejia = yuedui.yinyuejia_set.all()
            # yinyuejia = yuedui.xxx.all()
            # 然后变量名点上你要查询展示的这个乐队名下的音乐家的数据库表名小写加下划线set,通过乐队反向查询乐队下的所有音乐家,这里是多对多
            yinyueobj = zhanshiyinyuejiaSerializer(instance=yinyuejia,many=True)
            return Response({
                'status':1000,
                'msg':'ok',
                'data':yinyueobj.data
            })
    

    这是序列化的

    class zhanshiyinyuejiaSerializer(serializers.Serializer):
        id = serializers.IntegerField(read_only=True)
        name = serializers.CharField()
    
    展开全文
  • vue点击按钮跳转路由

    千次阅读 2021-11-10 16:27:37
    Vue点击按钮跳转路由,如下 <template> <button @click="jumpTo">点击跳转</button> <template> <script> methods:{ jumpTo(){ //跳转到上一次浏览的页面 this.$router.go...

    记录开发中的一点笔记
    Vue点击按钮跳转路由,如下

    <template>
    	<button @click="jumpTo">点击跳转</button>
    <template>
    
    <script>
    	methods:{
    		jumpTo(){
    			//跳转到上一次浏览的页面
          		this.$router.go(-1)
    
          		//指定跳转的地址
          		this.$router.replace('/将要跳转的路由名称')
    
          		//指定跳转的路由的名字下
          		this.$router.replace({name:'指定路由名称'})
    
          		//通过push进行跳转
          		this.$router.push('/将要跳转的路由名称')
    		}
    	}
    </script>
    
    展开全文
  • vue点击按钮跳转到另外一个页面

    万次阅读 多人点赞 2021-04-12 21:03:00
    长期不用都忘了,今天记录一下下。 1. 2. 3. 4. over
  • vue3 通过点击按钮实现页面跳转

    千次阅读 2021-12-09 17:23:12
    本意是想通过点击button实现div元素的全屏(覆盖边栏和顶部导航栏),但由于是模块内,无法控制全局显示,又不想在组件间传值搞得太复杂,于是通过路由跳转的方式实现。 在div定义一个最大化的按钮: <el-...
  • 今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • VueVue 中如何点击跳转页面

    万次阅读 2020-03-02 11:12:07
    思路:在有路由的情况下,对页面进行注册,并通过方法对路由中的实例(页面)进行转发,达到跳转页面的效果 1、在 router 目录下的 index.js 中加入组件的路由信息,包括路径、名称 import vMarkDown from '@/...
  • vue点击事件跳转新标签页

    千次阅读 2021-11-24 14:06:08
    场景:点击事件后,打开新的标签页 toOtherPage() { let routeUrl = this.$router.resolve({ path: "/otherpage", query: this.$store.state.initQuery, }); window.open(routeUrl.href, "_blank"); },
  • vue路由点击跳转页面

    2022-07-11 11:55:07
    vue路由点击跳转页面
  • vue 点击按钮 路由跳转指定页面

    万次阅读 多人点赞 2019-02-12 20:42:47
    最终效果: 点击指定按钮,跳转指定 /login 页面 代码: &...button @click="...点击跳转页面&lt;/button&gt; methods:{ gotolink(){ //点击跳转至上次浏览页面 // this.$router.g...
  • vue通过点击事件实现页面跳转

    万次阅读 2022-04-10 10:30:42
    页面跳转,我们一般都通过路由跳转实现,通常情况下可直接使用router-link标签实现页面跳转,但是如果我们想通过点击别的标签实现页面跳转,怎么办呢?这个时候我们就要用到this.$router.push()方法,下面来给大家...
  • 什么是Vue路由? 1.route 是一条路由,列如 Home 按钮=> home内容 2.routes是路由组,把route组合起来,形成一个数组。[{Home按钮=>home 内容 },{About按钮=>About内容}] 3.router 是一个机制,相当于一个管理者,...
  • vue 实现点击按钮跳转到对应位置

    千次阅读 2021-10-19 15:32:24
    文章目录前言一、vue+js的跳转定位总结 前言 开发记录。 一、vue+js的跳转定位 this.$el .querySelector(".className") .scrollIntoView({block: "start", behavior: "smooth"}); 总结 在标签中设置class类名...
  • 跳转网页方式 1、router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从...
  • 首先创建readDetail.vue 且在index.js中注册路由。 传递页面方式: 1.通过router-link进行跳转 <router-link :to="{ path: 'yourPath', params: { key: 'value', // or...
  • vue点击按钮进行跳转与返回

    千次阅读 2020-05-06 08:38:09
    点击跳转分为两种: 1.点击路由链接标签<router-link> 2.点击按钮 应用场景: 点击某个组件对象中按钮,显示出另一个路由组件对象 分析: 每个组件对象都有两个属性:$route,代表路由路径,$router类似...
  • vue点击按钮跳转页面

    万次阅读 2019-09-04 19:46:32
    const str = location.href.split('#')[0] window.open(`${str}#/ router的name `)
  • vue + ElementUI点击导航栏跳转页面是可以正常跳转高亮的,但通过页面内点击按钮跳转页面就会导致侧边栏不知道该选中哪个了(哪个处于高亮状态)? (遇到了这个问题,也从网上搜了一些解决办法,结合自己的项目...
  • 1:首先在view里面新建一个新的组件页面 addChip.vue 2:打开router/index.js 配置新增组件 { path: 'addChip', component: () => import('@/views/chip/addChip'), name: 'addChip', meta: { title: '新增...
  • vue2点击跳转页面

    千次阅读 2019-01-30 13:54:24
  • Vue组件显示与页面跳转

    千次阅读 2020-12-19 14:44:25
    最近在学习vue框架,从网上找了一个实例但是只有一个页面,就是所有组件都放到App.vue里,结果点击按钮,所有内容都显示在当前页面,但是我想实现页面跳转,搞了好几天,终于在网上找到了一个例子。下面贴出在一个...
  • Vue 点击按钮替换页面

    2022-03-18 18:36:31
    在(Vue 点击按钮跳转其他链接_Zhichao_97的博客-CSDN博客)的代码基础上,将ToOtherPage.vue的代码改为如下所示: <template> <div> <h1>ToOtherPage</h1> <button @click=...
  • 我就废话不多说了,大家还是直接看代码吧~

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,512
精华内容 7,804
关键字:

vue点击按钮跳转页面