Vue实现路由跳转至外界页面

目录
  • Vue路由跳转至外界页面
    • 解决办法
  • Vue路由跳转页面的几种方式
  • 总结

Vue路由跳转至外界页面

用法

如果使用路由是在 vue 页面中来回跳转，可以使用 this.$router.push() 实现，但是如果想用这种方法跳转到外部链接就会报错，因为外部页面中是存在 HTTP 等前缀的。

解决办法

1. 在 data 中定义好要跳转的外部链接

data() {
    return {
        url: 'http://www.baidu.com'
    }
}

2. 按钮中创建单击事件

<button @click='routeClick(url)'></button>

3. 函数实现

method: {
    routeClick(e) {
        // 通过此方法可以使用
        window.location.href = e;
    }
}

Vue路由跳转页面的几种方式

1.声明式导航router-link

// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">  
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 

1.2

<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">  
<router-link :to="/home/:id">  
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link> 

2.编程式导航 this.$router.push()

不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'}

带参数  query传参
1.路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id

3.params传参

1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id
script取参:this.$route.params.id

4.直接通过path传参

1.路由配置：
name: 'home',
path: '/home/:id'
2.跳转：
this.$router.push({path:'/home/123'})
或者：
this.$router.push('/home/123')
3.获取参数：
this.$route.params.id

5.this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

6.跳转页面打开新窗口并携带参数

const routeData = this.$router.resolve({
                path: `/workbench/customer_detail/${this.audioFrom.import_id}`
            })
window.open(routeData.href, '_blank')

7.跳转新项目并携带参数

window.open(`https://hao123/#/workbench/customer_detail/${this.audioFrom.import_id}`)

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue跳转页面的几种方法(推荐)

    vue跳转不同页面的多种方法 1:router-link跳转 <!-- 直接跳转 --> <router-link to='/testDemo'> <button>点击跳转2</button> </router-link> <!-- 带参数跳转 --> <router-link :to="{path:'testDemo',query:{setid:123456}}"> <button>点击跳

  • vue 点击按钮 路由跳转指定页面的实现方式

    vue 点击按钮 路由跳转指定页面的实现方式

    目录 点击按钮 路由跳转指定页面 最终效果 vue跳转页面常用的方式 1:router-link跳转 2:this.$router.push() 3.this.$router.replace() 4.this.$router.go(n) ps : 区别 点击按钮 路由跳转指定页面 最终效果 点击指定按钮,跳转指定 /login 页面 代码: <button @click="gotolink" class="btn btn-success">点击跳转页面&

  • 手把手教你Vue3实现路由跳转

    手把手教你Vue3实现路由跳转

    目录 一.安装 vue-router 二.新建 vue 页面 2.1 login.vue 2.2 register.vue 三.新建路由文件 3.1 新建 index.js 3.2 新建 routes.js 四.在 App.vue 中配置路由的跳转 五.在 main.js 中 use 路由 六.src 目录结构 七.结果 7.1 默认页面 7.2 点击登录 7.3 点击注册 总结 一.安装 vue-router npm install vue-router@4 二.新建 vue 页面 在 src

  • Vue实现路由跳转至外界页面

    目录 Vue路由跳转至外界页面 解决办法 Vue路由跳转页面的几种方式 总结 Vue路由跳转至外界页面 用法 如果使用路由是在 vue 页面中来回跳转,可以使用 this.$router.push() 实现,但是如果想用这种方法跳转到外部链接就会报错,因为外部页面中是存在 HTTP 等前缀的. 解决办法 1. 在 data 中定义好要跳转的外部链接 data() {     return {         url: 'http://www.baidu.com'     } } 2. 按钮中创建

  • vue 实现路由跳转时更改页面title

    一.router文件夹下的index文件中给每个path添加meta:{}: export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentInfo', name: 'studentInfo', component: studentInfo, meta: { title: 'title2' } } ]

  • 解决vue+router路由跳转不起作用的一项原因

    如下所示: Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', component: NotFound}, ] }) 记得要写上 mode:'history',

  • vue相同路由跳转强制刷新该路由组件操作

    想必大家在平时开发的时候可能遇到这种需求,在打开该菜单页面的情况下,再次点击菜单需要刷新该组件(销毁再创建).而vue自身如果路由不变的情况下是不会这样做的,那么只能使用一些骚操作了. 1.在菜单的路由跳转上绑定一个随机query参数,例如时间戳或者随机数: this.$router.push({ path:"/xxx", query:{ t:Date.now(), }, }); 该操作会触发路由改变,但是组件内的状态没有初始化,因为组件没有被重建. 2.在路由容器上绑定key值: &

  • vue中路由跳转不计入history的操作

    我就废话不多说了,大家还是直接看代码吧~ <van-field label="选择部门" :value="arr.DepartMentName" readonly right-icon="arrow" @click="$router.replace({ name: 'tree' })" /> 在下个页面使用replace跳回来即可 补充知识:vue-router模式为history的项目打包发布后不能通过地址栏里的

  • vue实现路由跳转动态title标题信息

    目录 路由跳转动态title标题信息 vue动态改变title 需求 解决需求一 解决需求二 路由跳转动态title标题信息 想要让浏览器的标题,随着vue的路由跳转的改变而改变,就要配置router/index.js文件里的信息.在meta对象里面配置一个title. {     path: "/",     name: "Home",     meta: {       title: "首页"//这是重点     },     compone

  • Angular 利用路由跳转到指定页面的指定位置方法

    之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似. detail.component.html <p>You'll see which payment methods are available to you on the checkout page,

  • vue router 路由跳转方法讲解

    目录 一.概述 二.跳转方法 1.使用router-link标签 2.使用router-replace 3.使用router-push 三.路由中params和query的区别 一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数to参数,表示你想要跳转到的路由对象 router-link标

  • vue中路由跳转的方式有哪些你知道吗

    目录 第一种方式:router-link (声明式路由) 第二种方式:router.push(编程式路由) 第三种方式:this.$router.push() (函数里面调用) 第四种方式:this.$router.replace() (用法同上,push) 参考: 总结 第一种方式:router-link (声明式路由) 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/

  • vue.js路由跳转详解

    本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <rout

随机推荐