11.vue-router编程式导航

Posted 2021-03-21 songsongblue

页面导航的两种方式

• 声明式导航:通过点击链接实现导航的方式，叫做声明式导航
  例如:普通网页中的 链接或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' }}}