二十、Vue之编程式导航

一、编程式导航啥意思？

  所谓编程式导航是和<router-link>相对应的。<router-link>可以类比为传统的超链接<a>，点击即可跳转，是静态的。但有时候我们需要动态跳转，比如：某用户想访问某个页面，但是该页面必须登陆以后才能访问，若该用户在未登录的请款修改访问该页面，则会自动跳转到登录页面。这种场景下，用我们传统的静态路由<router-link>是不太好实现的，优化方案就是使用我们的编程式导航。

二、编程式导航怎么用

1.安装vue-router插件

  编程式导航是靠我们的vue-router插件来实现的，所以需要安装vue-router插件（怎么安装，参见前面博文）。

2.路由

  分为两种方式，注意带参数时，两种写法的区别：
（1）第一种：

            /**
             * 第一种：这种对应配置路由为 { path: '/content', component: Content }
             * 注意：
             *      1.query 为请求 url 中所带参数
             *      2.如果提供了 path，params 会被忽略
             */
            this.$router.push({path: '/content', query: {id: '123'}});

（2）第二种：

            // 第二种：这种对应配置路由为 { path: '/content', component: Content, name: 'content' }，也叫命名路由
            this.$router.push({name: 'content', params: {id: '123'}});