码迷,mamicode.com
首页 > 其他好文 > 详细

11.vue-router编程式导航

时间:2019-12-22 12:51:41      阅读:71      评论:0      收藏:0      [点我收藏+]

标签:temp   方法   调用   命名   字符   eth   router   对象   out   

页面导航的两种方式

  • 声明式导航:通过点击链接实现导航的方式,叫做声明式导航
    例如:普通网页中的 链接或vue中的
  • 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航
    例如:普通网页中的location.href

1.编程式导航基本用法
常用的编程式导航API如下:

  • this.$router.push (‘hash地址‘)
  • this.$router.go (n)
const User = {
    template: '<div><button @click= "goRegister ">跳转到注册页面< /button></div>',
    methods: {
        goRegister: function() [
            //用编程的方式控制路由跳转
            this.$router.push('/register');
            }
        }
    }

2.编程式导航参数规则
router.push()方法的参数规则

//字符串(路径名称)
router.push('/home')
//对象
router.push({ path: ' /home' })
//命名的路由(传递参数)
router.push({ name: '/user', params: { userId: 123 }})
//带查询参数,变成/register?uname=lisi
router.push({ path: '/register', query: { uname: 'lisi' }}}

11.vue-router编程式导航

标签:temp   方法   调用   命名   字符   eth   router   对象   out   

原文地址:https://www.cnblogs.com/songsongblue/p/12079304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!