前端面试题149（详解vue跳转方式声明式和编程式）

在Vue.js中，页面或组件之间的跳转主要有两种方式：声明式导航和编程式导航。这两种方式都是基于Vue Router实现的。Vue Router是Vue官方的路由管理器，它能够让我们在构建单页面应用（SPA）时，方便地管理应用程序的不同视图（View）。

声明式导航

概念：
声明式导航指的是直接在模板中通过<router-link>组件来定义导航链接。这种方式更加声明式，易于理解，也便于维护。

使用方法：

1. 基本用法：

   <router-link to="/home">首页</router-link>
   

   这里，to属性指定了要跳转的目标路由路径。

2. 添加自定义样式：

   <router-link to="/about" class="nav-link">关于我们</router-link>
   

   可以通过添加class来自定义样式。

3. 使用标签属性：
   如果希望<router-link>渲染成不同的HTML元素，可以使用tag属性：

   <router-link to="/contact" tag="button">联系我们</router-link>
   

编程式导航

概念：
编程式导航则是通过JavaScript代码来实现导航的跳转。这种方式提供了更多的灵活性，可以在各种复杂的逻辑中控制导航行为。

使用方法：

1. 从Vue实例访问路由器：
   在创建Vue实例时，通常会将Vue Router的实例注入到Vue中，这样就可以在任何组件内通过this.$router访问到路由器。

2. 使用push方法：

   this.$router.push('/home');
   

   push方法会向历史记录栈添加一个新的记录，允许用户通过浏览器的后退按钮返回上一页。

3. 使用replace方法：

   this.$router.replace('/about');
   

   replace方法不会添加新的历史记录，而是替换当前的历史记录，用户无法通过后退按钮回到上一个页面。

4. 传递参数：
   无论是push还是replace，都可以传递参数到目标路由。

   // 字符串
   this.$router.push('user/' + this.userId);
   
   // 对象，推荐使用
   this.$router.push({ path: 'user', query: { id: this.userId } });
   

5. 命名路由与params：
   如果使用命名路由和params传递参数，可以这样做：

   this.$router.push({ name: 'UserProfile', params: { userId: this.userId } });
   

总结来说，声明式导航适合简单的导航结构，而编程式导航则在需要更复杂导航逻辑或与用户交互紧密相关的场景下更为灵活。两者结合使用，可以满足Vue应用中的各种导航需求。