vue中通过路由跳转的三种方式

简单记录，预计于7.20日前完善

router-view 实现路由内容的地方，引入组件时写到需要引入的地方
需要注意的是，使用vue-router控制路由则必须router-view作为容器。

通过路由跳转的基本方式

1、router-link 【实现跳转最简单的方法】

<router-link to='需要跳转到的页面的路径>

浏览器在解析时，将它解析成一个类似于 的标签。

    <li >
        <router-link to="keyframes">点击验证动画效果 router-link>   
     li>

PS：别忘记给需要跳转的路径在需要提前在router/index.js下引入哦。

2、this.$router.push({ path:’/user’})

常用于路由传参

this.$router.push({
            path: 'yourPath',            
            query: {
                name: 'name', 
                dataObj: this.msg
           }
        })
this.$router.push('yourPath?code=123')
以上两种获取方式一样 ，this.$router.query.参数名



this.$router.push({
            name: 'yourName',            
            params: {
                name: 'name', 
                dataObj: this.msg
           }
        })

获取参数的方式：this.$router.params.参数名

区别：

• 1.params只能用name来引入路由，而query 要用path引入

• 2.query传递方式：类似于我们ajax中get传参，在浏览器地址栏中显示参数

  • params则类似于post，在浏览器地址栏中不显示参数

在 Vue 实例内部，你可以通过 $router访问路由实例。因此你可以调用this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)