Vue路由实现页面跳转的两种方式(router-link和JS)
Posted leophen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue路由实现页面跳转的两种方式(router-link和JS)相关的知识,希望对你有一定的参考价值。
Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用
1、通过 <router-link> 实现
<router-link> 组件用于设置一个导航链接,切换不同 html 内容
使用方法:
-
简单写法
<router-link to="demo2">demo2</router-link>
-
使用 v-bind 的写法
<router-link :to="‘demo2‘">demo2</router-link> <!-- 也可以用包裹对应的path或name --> <router-link :to=" name: ‘demo2‘ ">demo2</router-link>
-
传参的写法
<router-link :to=" name: ‘demo2‘, params: userId: 123 ">demo2</router-link>
这里传参需要在 router.js 中对 demo2 的路径进行配置,在 path 中 demo2 后添加通配符 : 和对应的 userId,如下:
path: ‘/demo2/:userId‘, name: ‘demo2‘, component: demo2 ,
配置完成后,页面跳转的结果就为 /demo2/123
这里的“123”就是上面的 userId
那么,如何在新页面中获取到传过来的参数 userId 呢?
在 mounted 钩子中使用 this.$route.params.xx. 获取传过来的参数,如下:
mounted () alert(this.$route.params.userId) // 弹出123
-
传入地址键值对
<router-link :to=" path: ‘demo2‘, query: plan: ‘private‘ ">demo2</router-link>
页面跳转的结果为 /demo2?plan=private
(注意这里不用在 router.js 里配置路径)
在新页面中获取到传过来的地址键值对 plan,可以在 mounted 钩子中使用 this.$route.plan.xx. 获取传过来的地址键值对,如下:
mounted () alert(this.$route.query.plan) // 弹出private
2、通过 JS 实现
template 部分:
<button @click="toURL">跳转页面</button>
script 部分:
(注意这里是 router,上面是 route)
-
简单写法
methods: toURL() this.$router.push( path: ‘/demo2‘ )
-
传参的写法
methods: toURL() this.$router.push( name: ‘demo2‘, params: userId: 123 )
-
传入地址键值对
methods: toURL() this.$router.push( name: ‘demo2‘, params: userId: 123 , query: plan: ‘private‘ )
以上是关于Vue路由实现页面跳转的两种方式(router-link和JS)的主要内容,如果未能解决你的问题,请参考以下文章