vue.js 怎么进行页面跳转? 下面本篇文章给大家介绍一下 vue 路由实现页面跳转的方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
Vue 路由实现页面跳转的方式
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' }
- })
- }
- }
更多 Web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17166.html