Vue - 详解路由跳转及路由传参问题

最新推荐文章于 2023-04-07 17:13:25 发布
最新推荐文章于 2023-04-07 17:13:25 发布
阅读量1.9k 收藏 113
点赞数 12
分类专栏： # Vue__基础 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie_1997/article/details/106170620
版权

在Vue中路由跳转有四种方式

一. 路由跳转有四种方式

  1. router-link

  2. this.$router.push() (函数里面调用)

  3. this.$router.replace() (用法同push)

  4. this.$router.go(n)

二. 不带参路由跳转

1. router-link

  • 路由配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

  • 路由跳转

    <router-link :to="{name:'index'}">跳转</router-link>
<router-link :to="{path:'/index'}">跳转</router-link>

2. this.$router.push()

  • 路由配置
    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
  • 路由跳转
    this.$router.push('/index')
this.$router.push({name:'index'})
this.$router.push({path:'/index'})

3. this.$router.replace()

用法和this.$router.push()一样，push效果是进行跳转，replace可以理解为非跳转，而是替换当前路由地址

  • 路由配置
    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },
  • 路由跳转
    this.$router.replace('/index')
this.$router.replace({name:'index'})
this.$router.replace({path:'/index'})

4. this.$router.go(n)

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

二. 带参路由跳转

1. router-link

1.1. params 传参

  • 不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    <router-link :to="{name:'index',params:{id:1}}">跳转</router-link>

  • 配置路由path参数，刷新页面，所传参数会保留

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    <router-link :to="{name:'index',params:{id:1}}">跳转</router-link>

  • 取参数

    两种方法可取：
    html 页面直接使用：$route.params.id
    script 取参：this.$route.params.id

    <template>
    <div>
        <span>Index页面</span>
        <p>html 取参:{{$route.params.id}}</p>
        <p>script 取参{{linkOne}}</p>
    </div>
</template>
<script>
export default {
    data(){
        return{
            linkOne:0
        }
    },
    mounted(){
        this.linkOne=this.$route.params.id
    },
}
</script>
<style scoped>
</style>

1.2. query 传参

  • 路由path参数可以不配置，刷新页面，所传参数不会消失

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    <router-link :to="{name:'index',query:{id:1}}">跳转</router-link>

  • 取参数

    两种方法可取：
    html 页面直接使用：$route.query.id
    script 取参：this.$route.query.id

    <template>
    <div>
        <span>Index页面</span>
        <p>html 取参:{{$route.query.id}}</p>
        <p>script 取参{{linkOne}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            linkOne:0
        }
    },
    mounted(){
        this.linkOne=this.$route.query.id
    },
}
</script>

<style scoped>
</style>

2. this.$router.push()

2.1. params 传参

  • 不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    this.$router.push({name:'index',params: {id:'1'}})

  • 配置路由path参数，刷新页面，所传参数会保留

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    this.$router.push({name:'index',params: {id:'1'}})

  • 取参数

    两种方法可取：
    html 页面直接使用：$route.params.id
    script 取参：this.$route.params.id

    <template>
    <div>
        <span>Index页面</span>
        <p>html 取参:{{$route.params.id}}</p>
        <p>script 取参{{routerData}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.params.id
    },
}
</script>

<style scoped>
</style>

2.2. query 传参

  • 路由path参数可以不配置，刷新页面，所传参数不会消失

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    this.$router.push({name:'index',query: {id:'1'}})

  • 取参数

    两种方法可取：
    html 页面直接使用：$route.query.id
    script 取参：this.$route.query.id

    <template>
    <div>
        <span>Index页面</span>
        <p>html 取参:{{$route.query.id}}</p>
        <p>script 取参{{routerData}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.query.id
    },
}
</script>

<style scoped>
</style>

3. this.$router.replace()

  • 用法和this.$router.push()一样，push效果是进行跳转，replace可以理解为非跳转，而是替换当前路由地址

3.1. params 传参

  • 不配置路由path参数 ，第一次可请求获取参数，刷新页面，所传参数会消失

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    this.$router.replace({name:'index',params: {id:'1'}})

  • 配置路由path参数，刷新页面，所传参数会保留

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index/:id',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    this.$router.replace({name:'index',params: {id:'1'}})

  • 取参数

    两种方法可取：
    html 页面直接使用：$route.params.id
    script 取参：this.$route.params.id

    <template>
    <div>
        <span>Index页面</span>
        <p>html 取参:{{$route.params.id}}</p>
        <p>script 取参{{routerData}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.params.id
    },
}
</script>

<style scoped>
</style>

3.2. query 传参

  • 路由path参数可以不配置，刷新页面，所传参数不会消失

    路由参数配置

    { path: '/home',name: 'home',component: ()=>import('@/components/router/Home.vue') },
{ path: '/index',name: 'index',component: ()=>import('@/components/router/Index.vue') },

    路由传值跳转

    this.$router.replace({name:'index',query: {id:'1'}})

  • 取参数

    两种方法可取：
    html 页面直接使用：$route.query.id
    script 取参：this.$route.query.id

    <template>
    <div>
        <span>Index页面</span>
        <p>html 取参:{{$route.query.id}}</p>
        <p>script 取参{{routerData}}</p>
    </div>
</template>

<script>
export default {
    data(){
        return{
            routerData:0
        }
    },
    mounted(){
        this.routerData=this.$route.query.id
    },
}
</script>

<style scoped>

</style>
风轻轻~
关注
  • 12
    点赞
  • 踩
  • 113
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目刷新当前页面
看门猫的博客
02-19 363
Vue项目刷新当前页面问题描述解决方法原始方法vue自带的路由跳转使用provide / inject 组合 问题描述 我们在项目中执行某些增加、修改和删除的操作，使得当前页面元素的值发生了变化，为了在当前页面中观察到变化后的元素值，我们必须刷新当前页面。 解决方法 以下方法参考自：https://segmentfault.com/a/1190000017007631 原始方法 使用以下代码刷新页...
解决使用this.$router.push()方法页面跳转后不加载mounted
weixin_44161676的博客
04-13 1093
跳转到页面后，跳转的页面无法加载mounted里的方法因此无法获取数据更新，只需在跳转页面加上监听。
vue页面路由跳转重复报错的问题
多看书少吃饭的博客
06-20 1220
vue页面路由跳转重复报错的问题
vue-router 页面传参的俩种方法
qq_28223305的博客
07-10 7931
a页面传参到b页面 routes页面代码 let routes = [   {   {     path: '/a',     component: A,     name: 'a',   },   {     path: '/b/:Id',     component:B,     name: 'b',   }, } a页面代码 this.$router.pu
this.$router.push(‘/ad_index‘)跳转页面出错
m0_64457414的博客
04-07 62
this.$router.push('/adindex')就成功了。路径名不能有‘-’，要写成。
详解vue-router 路由元信息
01-19
之前写前端都是后端返回界面，跳转神马的完全不用自己操心，但是这次用 vue 写的前端，第一次前后端分离，后端只给前端提供数据接口，一开始还想着是后端控制界面的渲染神马的，但是后面一想，路由神马的都是前端...
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
vue2+el-menu 实现路由跳转及当前项的设置方法实例主要介绍了 vue2+el-menu 实现路由跳转及当前项的设置，方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下。 实现路由跳转 要实现路由跳转，...
VueJs路由跳转——vue-router的使用详解
10-20
【VueJs路由跳转——vue-router的使用详解】 Vue.js是一个流行的前端JavaScript框架，用于构建用户界面，尤其适合单页应用程序。为了管理页面间的跳转和状态，Vue.js引入了vue-router作为官方的路由库。vue-router...
$route.push()多次点击跳转报错问题
qq_52693197的博客
05-11 2635
1.出现的问题： 当我们在多次点击this.$route.push()方法以后会出现一下报错： 出现上述的问题是vue-router：“^3.5.3"最新出的vue-router引入了promise(当我们点击了router.push()以后返回的 是一个promise对象。 2.解决的方案： 1.通过给push方法传递相应的成功，失败、的回调，可以通过捕获到当前的错误，可以解决(但不是最根本的方法),将来在别的组件中push|replace.编程式导航还是有类似的错误。 2.重写route.
vue $router路由跳转方式 --带参数
weixin_47239395的博客
08-13 3460
方法: push()和replace()跳转 this.$router.push()和this.$router.replace()用法一致 1. 不带参数 this.$router.push('/login') //this.$router.replace('/login') this.$router.push({name:'login'}) //this.$router.replace({name:'login'}) this.$router.push({path:'/login'
路由的四种跳转方式以及参数传递
qq_38123697的博客
11-05 1162
router-link 不带参数 //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 // params传参数 (类似post) // 路由配置 path: “/home/:id” 或者 path: “/home:id” // 不配置path ,第一次可请求,刷新页面i...
在vue中路由传递参数
weixin_43709908的博客
11-29 748
1.router-link传参 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 <ro...
vue中的路由跳转了，url改变，但是页面为空白，没有到达指定文件
m0_47265814的博客
05-25 2万+
问题描述： 初始路径 跳转之后： 然后当前页面全白了，到了一个空页面 如果输入一个没有对应文件的url时也会出现这种情况，比如： 我的目录下并没有mycollect文件 我的路由书写过程： 1.在router下的index.js中声明路由 const myinterest = () => import('@/my/myinterest') 2.还在该文件下注册路由 { // 这是链接上的显示路径 path: '/myinterest', componen
解决Vue Router4中params 传参失效和报错问题
LP'S Blog
02-27 4695
在使用vue-router4中params 进行路由组件之间传参，跳转页面接收不了并出现如下错误如下是我的代码传输页面接收页面。
Vue中this.$router.replace和this.$router.push的区别
weixin_50723416的博客
08-09 3万+
this.$router.push 跳转到指定URL，向history栈添加一个新的纪录，点击后退会返回至上一个页面。 声明式：< router-link :to = “…” > 编程式：< router.push(…) > // 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。 // 字符串 this.$router.push('/index') // 对象 this.$router.push({path:'/index'}) // 带查询参数，变成/backen
vue中this.$router.push()路由传值和获取的两种常见方法
weixin_43365444的博客
11-24 1534
vue中this.$router.push()路由传值和获取的两种常见方法 1、路由传值 this.$router.push() （1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击 时，这个方法会在内部调用，即点击 等同于调用 router.push(…) a) ...
二级路由、路由跳转、 this.$router与 this.$route
weixin_48879122的博客
09-20 2385
简单讲述了二级路由、路由跳转、 this.$router与 this.$route的方法；
vue-router 多级路由redirect 重定向的问题
热门推荐
versionli的博客
06-27 8万+
在做多级路由的时候遇到很多问题，虽然不难，但是如果没有经验，往往要花一整天时间才能解决（可能我笨），况且网上资料也很少。项目需要是这样的： 登录页面跳到后台页面重定向，登录页是一级路由对应页面登录后：同时重定向二级和三级页面，这样登录就会重定向了，此时url但又有一个问题：当再次点击底部“堂食”的时候，url变成这样，并且三级页面没有出来解决办法是：在这个“堂食”按键 添加一个方法记住，也只...
vue-router路由模式
最新发布
07-27
- *1* [vue-router路由模式详解](https://blog.csdn.net/qq_47443027/article/details/115271816)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值