【声明式导航与编程式导航】

导航：即实现不同路由之间的切换

---

一、声明式导航（router-link）

1.使用

跳转到哪里，也就是to后面要写完整路径
实现切换：（ active-class可配置高亮样式 ）

 <router-link
              class="list-group-item"
              active-class="active"
              to="/home/message"
              >Message</router-link
            >

---

指定展示位置：

  <router-view> </router-view>

2.路由传参

• 方式一
  携带query参数，to的字符串写法

<router-link :to="`/home/message/detial?id=${ m.id }&title=${m.title}`">{{ m.title }}</router-link>

携带params参数，to的字符串写法
配置的时候要用占位符
path: 'detial/:id/:title',

<router-link :to="`/home/message/detial/${ m.id }/${m.title}`">{{ m.title }}</router-link>

• 方式二
  携带query参数，to的对象写法
  命名路由可以简化路由的跳转

<router-link :to="{
        //  name:'xiangqing',
            path：'/home'
            query:{
            id:m.id,
            title:m.title
            }
          }">
          {{ m.title }}
        </router-link>

携带query参数，to的对象写法
注意：对象写法时不能使用path，一定要用name配置项

 <router-link :to="{
            name:'xiangqing',
            params:{
              id:m.id,
              title:m.title
            }
          }">
          {{ m.title }}
        </router-link>

• 接收参数

{{ $route.router.id }} 
$route.router.title

$route.params.id 
$route.params.title

二、编程式导航（push|replace）

不借助router-link实现路由跳转，可以用其他元素，如button等，让路由跳转更灵活

1.使用

实现切换：

• 方式一
  push:就像栈，一个一个进，再出

   this.$router.push({
        name: 'xiangqing',
        query: {
        id: m.id,
        title: m.title
        }
      })

• 方式二
  replace：总是替换前一个，最终结果只有最后一个路由

    replaceShow(m) {
      this.$router.replace({
        name: 'xiangqing',
        query: {
          id: m.id,
          title: m.title
        }
      })
    }

跳转行为：

  <button @click="back">后退</button>
  <button @click="forward">前进</button>
  <button @click="test">测试一下go</button>

methods: {
    back() {
      this.$router.back()//前进
    },
    forward() {
      this.$router.forward()//后退
    },
    test() {
      this.$router.go(1)//可前进也可后退，数字表示前进几步
    }
  }

---

三、用声明还是编程式导航

router-link也可以只使用一个。当服务器返回数据后，可以循环出很多个router-link组件。
但是如果有1000+数据组件实例，会很耗内存，因此会出现卡顿现象。
所以此时用编程式导航。