11.vue-router编程式导航

页面导航的两种方式

  • 声明式导航:通过点击链接实现导航的方式,叫做声明式导航
    例如:普通网页中的 链接或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' }}}
posted on 2019-12-22 11:22  songsong_p_blue  阅读(207)  评论(0编辑  收藏  举报