11.vue-router编程式导航

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

页面导航的两种方式

  • 声明式导航:通过点击链接实现导航的方式，叫做声明式导航

    例如:普通网页中的 链接或vue中的<router-link>

  • 编程式导航:通过调用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编程式导航 的全部内容， 来源链接： utcz.com/z/379884.html

回到顶部