精华内容
下载资源
问答
  • vue跳转页面详解

    2021-01-05 11:33:26
    vue跳转页面详解

    Vue支持的跳转:

    通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由(以下两图分别是this.$router、this.$route对象)。

    跳转到相应的页面我们使用this.$router.push

        // 不带参数
        this.$router.push('index/228900')
    
        // 带参数
        this.$router.push({name:'login', params:{userId: 'user',password:'123'}})
    
        this.$router.push({path:'folder', query:{folderId:'1'}})

    需要注意的是由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。query和params区别是:query 相当于 get 请求,页面跳转的时候可以在地址栏看到请求参数,params 相当于 post 请求,参数不在地址栏中显示。


    实现跳转也可以使用 <router-link> 标签, <router-link> 标签内部实现了 this.$router.push() ,使用方法与 his.$router.push()相同

    <router-link to="home"> to apple</router-link>
    
    <router-link :to="{path: 'login', query: {user: '123' }}"> url </router-link>
    
    <router-link :to="{name: 'folder', params: { folderId: '1' }}"> folder </router-link>

     


    window.open跳转

    vue跳转只支持单页面跳转,当需求跳转时打开新页面需要使用window.open,使用方法具体使用方法可在菜鸟教程中查看,这里给出在新Tab页中打开和新window中打开的例子

        //在新Tab中打开    
        openUrlInNewTab(url) {
          this.blurButton()
          if (!url.startsWith('/')) {
            url = '/' + url
          }
          window.open(url)
        }
        // 在新window中打开
        openUrlInNewWindow(
          url,
          features = ['resizable', 'scrollbars', 'width=832', 'height=1200']) {
          if (!url.startsWith('/')) {
            url = '/' + url
          }
          window.open(url, '_blank', features.join())
        },

     

    展开全文
  • 最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。典型应用场景:列表页跳转到详情页一、配置路由文件路径:src/router/config.phpimport vue from 'vue'import router from 'vue-router'...

    最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式。

    典型应用场景:列表页跳转到详情页

    一、配置路由

    文件路径:src/router/config.php

    import vue from 'vue'

    import router from 'vue-router'

    import classify from '.././components/classify/classify.vue'

    import classifychild from '.././components/classify/classifychild.vue'

    export default new router({

    mode: 'history',

    routes: [

    {

    path: '/classify',

    name: ' classify',

    component: classify

    },

    {

    path: '/classify/classifychild',

    name: 'classifychild',

    component: classifychild

    },

    ]

    })

    二、页面跳转及传参

    //方式一

    跳转

    //方式二

    跳转

    三、参数接收

    //对应于方式一

    let id=this.$route.params.id;

    //对应于方式二

    let id=this.$route.query.id;

    补充知识:关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题

    首先在store中定义所需要的变量可以进行初始化,再定义一个方法,登录成功后a页面,跳转到b页面之前,需要直接调用store中存储数据的方法,全局可以使用,顺序是,先调用store中的数据,其次调用sessionstorage和localstorage中的数据。

    这样的话,可以避免a页面跳转b页面时候,手动刷新才显示信息。

    直接登录成功后,直接调用store的方法,把值存储进去,b页面可以直接显示用户信息。必须在store定义方法,登录成功后调用方法进行回显用户信息。在这里插入图片描述

    如此一来,就可以避免必须手动刷新一下才会显示信息。

    以上这篇vue页面跳转传递参数及接收方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。

    希望与广大网友互动??

    点此进行留言吧!

    展开全文
  • [Vue] vue跳转外部链接

    千次阅读 2019-01-25 11:26:00
    vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面 var url = 'www.baidu.com' //跳转1 window.localtion.href = url //跳转2 window.history.pushState(url); window.history.replaceState(url); //跳转3 ...

    问题

    vue 跳转外部链接问题,当跳转的时候会添加在当前地址后面

    var url = 'www.baidu.com'
    
    //跳转1
    window.localtion.href = url
    
    //跳转2
    window.history.pushState(url);
    window.history.replaceState(url);
    
    //跳转3
    window.open(url,"_blank");
    
    //跳转4
    var a = document.createElement("a");
    a.setAttribute("href", "www.baidu.com");
    a.setAttribute("target", "_blank");
    a.click();
    http://192.168.0.139:8080/#/
    http://192.168.0.139:8080/www.baidu.com#/

    这时将 url 前面添加响应的 (http://https://)

    var p = window.location.protocol;
    var a = document.createElement("a");
    a.setAttribute("href", `${p}//www.baidu.com`);
    a.setAttribute("target", "_blank");
    a.click();
    document.getElementsByTagName("body")[0].appendChild(a);

    转载于:https://www.cnblogs.com/mybilibili/p/10318675.html

    展开全文
  • vue跳转不同页面的多种方法1:router-link跳转点击跳转2点击跳转1点击跳转32:this.$router.push()点击跳转4export default{name:'test',methods:{goTo(){//直接跳转this.$router.push('/testDemo');//带参数跳转...

    vue跳转不同页面的多种方法

    1:router-link跳转

    点击跳转2

    点击跳转1

    点击跳转3

    2:this.$router.push()

    点击跳转4

    export default{

    name:'test',

    methods:{

    goTo(){

    //直接跳转

    this.$router.push('/testDemo');

    //带参数跳转

    this.$router.push({path:'/testDemo',query:{setid:123456}});

    this.$router.push({name:'testDemo',params:{setid:111222}});

    }

    }

    }

    params和query传参数有什么不一样??在地址栏中可以看到,params传参数时,地址栏中看不到参数的内容,有点像ajax中的post传参,query传参数时,地址栏中可以看到传过来的参数信息,有点像ajax的个体传参

    如果单独传setId一个参数的时候,地址栏中的地址如下图:

    第一种方式:path - query 传参

    第二种方式:name - params传参数

    但是一般情况下,传参数是传递一个对象,当传递的是一个对象的时候,地址栏中的地址如下图:

    第一种方式:path - query 传参

    第二种方式:name - params传参数

    3:a标签可以跳转么??可以跳转外部链接,不能路由跳转

    点击跳转5

    接收方怎么接收参数??this.$route.query.serid和this.$route.params.setid,以下举一个接收的例子

    注意接收参数时是 $route 不是 $router

    testDemo{{this.$route.query.setid}}

    知识点补充:vue三种不同方式实现页面跳转

    Vue:router-lin

    [跳转到主页]

    [登录]

    [登出]

    this.$router.push("/");

    [跳转到主页]

    export default {

    name: "App",

    methods: {

    // 跳转页面方法

    goHome() {

    this.$router.push("/");

    },

    }

    this.$router.go(1);

    [上一页]

    [下一页]

    upPage() {

    // 后退一步记录,等同于 history.back()

    this.$router.go(-1);

    },

    downPage() {

    // 在浏览器记录中前进一步,等同于 history.forward()

    this.$router.go(1);

    }

    代码示例:

    [跳转到主页]

    [登录]

    [登出]

    [跳转到主页]

    [上一页]

    [下一页]

    export default {

    name: "App",

    methods: {

    // 跳转页面方法

    goHome() {

    this.$router.push("/");

    },

    upPage() {

    // 后退一步记录,等同于 history.back()

    this.$router.go(-1);

    },

    downPage() {

    // 在浏览器记录中前进一步,等同于 history.forward()

    this.$router.go(1);

    }

    }

    };

    总结

    到此这篇关于vue不同方法跳转页面的几种方法的文章就介绍到这了,更多相关vue 跳转页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

    本文标题: vue跳转页面的几种方法(推荐)

    本文地址: http://www.cppcns.com/wangluo/javascript/304022.html

    展开全文
  • vue跳转默认页配置

    千次阅读 2019-04-09 16:36:26
    vue跳转默认页配置 在index.js文件最下面增加以下代码片段即可。其中redirect后的内容为跳转的路径
  • vue.js如何带参数跳转?下面本篇文章给大家简单介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue 跳转页面并传递参数首先创建readDetail.vue 且在index.js中注册路由。传递页面方式...
  • WebStorm + Vue 跳转到文件,解决@符号引入无法跳转的问题WebStorm + Vue 跳转到文件,解决@符号引入无法跳转的问题 WebStorm + Vue 跳转到文件,解决@符号引入无法跳转的问题 在项目根目录下创建webpack.config.js...
  • vue跳转路由并传递参数 很多时候我们在编写vue项目时需要跳转页面并携带参数 编码如下: this.$router.push({ name:"Personal", params:{ name:'name', userType:userType ...
  • vue 跳转的两种方法

    2019-08-26 16:15:04
    vue 跳转的两种方法 https://www.cnblogs.com/lidonglin/p/9836728.html
  • 这里写自定义目录标题vue跳转注册时Unhandled promise rejection undefined vue跳转注册时Unhandled promise rejection undefined // 挂载路由导航守卫 router.beforeEach((to, from, next) => { if (to.path ==...
  • 但是vue不一样 需要操作的是路由history,需要用到 VueRouter,示例:常用的场景是:列表页点击“查看”按钮,跳转到详情页。在列表页(list.vue)按钮点击事件里写上detail(row) {this.$router.push({ path: "detail",...
  • vue 跳转到外部 后回跳

    千次阅读 2019-04-30 16:44:00
    微信 vue 跳转到外部 后回跳 ,比如登陆 授权操作 。需要 路由 先跳转到一个中间页面 后再跳转到授权服务器!而不能跳转前的页面与回跳后的页面相同 不然回跳可能会出现空白 路由不解析。 转载于:...
  • 1.vue页面跳转// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$router.push({ name: 'home', params: { userId: wise }})Go to Foo2.vue生命周期每...
  • vue 跳转页面css不失效

    2020-03-13 14:19:40
    vue 跳转页面css 不被摧毁 1、加:scoped 2、如果是@import方式的话、这样引入 <style scoped> body.boxed-layout { background: url('../assets/img/shattered.png'); } .nav-header { padding: 34px 25px...
  • vue跳转相同路由 刷新页面
  • Vue 跳转路由传参以及获取参数

    千次阅读 2019-04-08 19:32:42
    Vue 跳转路由传参以及获取参数 跳转路由传参 跳转前的页面编辑:(即传参页面) 在template中跳转路由传递参数(query) <router-link :to="{path:'/positionList',query:{province:1,city:1}}" class="beijing"&...
  • bianji.vue(编辑页面——form表单,得到table里给传过来的值) table.vue 要传参的页面: 如下:在methods:{ 写修改的方法} 两种方法传参, 第一种传参 name 与 结合使用params ,第二种传参 path 与 ...
  • vue跳转新页面之后会停留在上个页面滑动的位置,但我们实际新页面需要回到顶部。解决方案有: 全部页面的话就在router文件夹的index.js中设置 router.afterEach((to,from,next)=>{ window.scrollTo(0,0); }...
  • vue跳转时路由相同但参数不同问题解决方案一:watch方案二:beforeRouteUpdate 问题 在开发vue项目中遇到一个问题:两个导航公用一个显示界面,我打算通过路由传参的形式进行区别,利用vue的钩子,调用不同的查询...
  • vue跳转路由

    2019-06-11 19:26:52
    1、下载 npm i vue-router 2、main.js import VueRouter from ‘vue-router’ import Index from ‘./pages/index.vue’ 2、main.js Vue.use(VueRouter) 3、let router = new VueRouter({ routes: [{ name: 'index'...
  • vue跳转同一路径时,路由参数改变,但页面无法更新 问题原因 vue路由切换实际是组件间的切换,引用相同组件的时候,页面就无法更新 解决方案 方案1.watch监听路由参数变化,并重新渲染(谨慎选择) 该可以实现...
  • 本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考,具体如下:1. router-link跳转// 直接写上跳转的地址link跳转// 添加参数// 参数获取id = this.$route.query.id// 新窗口打开2. this.$...
  • vue 跳转同一路由,页面不刷新解决方案 问题原因 : vue官网详细解释说明使用同一路由携带不同参数,本质上是重用相同的组件实例,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件,因此不会调用组件的生命...
  • vue跳转页面的时候要是不带自动生成路径的话,是需要自己配置页面的路由的 在这里进行配置就可以,里面会有案例自己跟着配置就好 第二步: 配置完成后就可以进行跳转了,代码如下: 跳转页面并且是新窗口打开 //这...
  • vue跳转外部链接

    2020-08-25 17:13:29
    vue内部跳转是可以通过,router的方法,this.$router.push()和 rout-link 来跳转,这里说下她跳转外部地址的方法: 1、window.location.href = url 2、window.open('http://www.baidu.com',"_blank"); //打开一个...
  • 最后的解决方案是这样子方法一://路由里面的代码{path:'/networkError',component:require('@/views/index/networkError.vue').default,name:'网络异常',meta:{title:'网络异常'}},不要使用路由懒加载,这样会动态...
  • 这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,结合实例形式分析了vue.js跳转实现方式与参数接受相关操作技巧,需要的朋友可以参考下 本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供...
  • vue跳转页面滚动到指定位置--瞄点

    千次阅读 2020-06-03 09:34:58
    vue跳转页面滚动到指定位置--瞄点scrollIntoView() scrollIntoView() <!-- moreContent --> <div class="xinya-conten-item"> <router-link tag="div" class="moreContent" :to="{ name: '...
  • vue 跳转外部链接

    千次阅读 2019-07-12 15:48:28
    <...跳转到外部链接</router-link>...vue里用router-link跳转外部链接发现是不对的; 链接前面加了 #/ 点击跳转到的地址是 localhost:8083/#/http://baidu.com; 所以跳转外部链接直接用a标签就行; ...
  • vue跳转时页面传参没法隐藏或隐藏后刷新页面消失问题问题描述解决办法页面刷新参数消失问题解决 问题描述 路由时用的用的router,官网给的传参方式query,params。 可是问题是 query传参会在url显示传的参数, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,125
精华内容 6,050
关键字:

vue跳转

vue 订阅