vue-router学习2：路由导航方式

声明式导航

声明式导航方式在Vue Router中主要通过<router-link>组件来实现，它允许你直接在模板中创建导航链接，而无需编写额外的JavaScript代码。以下是一些常见的声明式导航方式及其示

1. 基本的导航链接

使用<router-link>组件，并通过to属性指定目标路由的路径。

<router-link to="/home">Home</router-link>  
<router-link to="/about">About</router-link>

2. 带查询参数的导航

你可以通过在to属性中传递一个对象来添加查询参数。

<router-link :to="{ path: '/search', query: { q: 'vue' } }">Search Vue</router-link>

3. 命名路由导航 

如果你的路由配置中使用了命名路由，你可以通过to属性中的name属性来导航到相应的路由。

<router-link :to="{ name: 'user', params: { id: 123 } }">User 123</router-link>

4. a标签跳转

可以直接通过a href跳转

 <a href="#/Home">首页</a>

编程式导航

编程式导航是Vue Router提供的一种灵活的方式来进行路由导航。这种方式主要通过Vue组件实例或Vue Router实例的方法来实现，而不是在模板中声明导航链接。

1. router.push(location, onComplete?, onAbort?)

push方法用于导航到新的URL，类似于<router-link>的to属性。它可以接收一个路径字符串或是一个描述目标位置的对象。

this.$router.push('/home'); // 导航到 /home 路径  
  
// 使用带查询参数的对象  
this.$router.push({ path: '/search', query: { q: 'vue' } }); // 导航到 /search?q=vue  
  
// 使用命名路由和参数  
this.$router.push({ name: 'user', params: { id: 123 } }); // 导航到命名路由user，并传递id参数

2.  router.replace(location, onComplete?, onAbort?)

replace方法用于替换当前路由，它不会向浏览器历史记录中添加新的记录。

this.$router.replace('/about'); // 替换当前路由为 /about，但不记录历史

3.  router.go(n)

go方法用于在浏览器历史记录中前进或后退指定的步数。

this.$router.go(1); // 前进一步，类似于浏览器的前进按钮  
this.$router.go(-1); // 后退一步，类似于浏览器的后退按钮