Vue学习第31天——编程式路由导航5种方法详解及案例练习（与声明式路由导航对比）

一、编程式路由导航

1、概念

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

2、理解

不借助 实现路由跳转

3、用法

在vue组件中，可以通过 $router 访问路由实例，因此可以调用this.$router.xxx方法完成路由跳转

pushDetail(cat){
	// 字符串路径
	$router.push('/cats/detail')
	
	// 带有路径的对象
	$router.push({ path: '/cats/detail' })
	
	// 命名的路由，并加上参数，结果是/cats/detail/憨瓜
	$router.push({ name: 'xiangqing', params: { name: '憨瓜' } })
	
	// 带查询参数，结果是 /cats/detail?name=憨瓜
	$router.push({ path: '/cats/detail', query: { name: '憨瓜' } })
}

二、编程式路由导航的5种方法

1、push

this.$router.push({...}) 可以回退到上一次记录

this.$router.push({
    path:'/cats/detail',
    query:{
      name:cat.name,
      age:cat.age,
    }
  })

2、replace

this.$router.replace({...}) 替换掉了历史记录，不可以回退到上一次记录

this.$router.replace({
    path:'/cats/detail',
    query:{
      name:cat.name,
      age:cat.age,
    }
  })

3、forward

this.$router.forward() 前进，前进到下一次的历史记录（相当于浏览器的→按钮）

this.$router.forward()

4、back

this.$router.back() 后退，后退到上一次的历史记录（相当于浏览器的←按钮）

this.$router.back()

5、go

this.$router.go() 可以前进也可后退（携带参数，正数为前进，负数为后退）

this.$router.go(2) //前进两步
this.$router.go(-3) //后退3步

三、案例练习

需求：练习编程式导航的5种方法

App.vue

<template>
  <div id="app">
    <button @click="forwardBtn">前进forwardbutton> 
    <button @click="backBtn">后退backbutton> 
    <button @click="goBtn">测试go前进两步button>
    <h3>喵喵学院成员信息h3>
      <router-link to="/cats" push>猫咪信息展示router-link> 
      <router-view>router-view>
  div>
template>

<script>

export default {
  name: 'App',
  methods:{
    //前进
    forwardBtn(){
      this.$router.forward()
    },
    //后退
    backBtn(){
      this.$router.back()
    },
    //正数为前进，负数为后退
    goBtn(){
      this.$router.go(2)
    }
  }
}
script>
<style>
  a {
    text-decoration: none;
  }
style>

router/index.js

import Vue from "vue";
import VueRouter  from "vue-router";

Vue.use(VueRouter);

import Cats from "../pages/Cats";
import Detail from "../pages/Detail"

export default new VueRouter({
    routes:[
        {
            path:'/cats',
            component:Cats,
            children:[
                {
                    path:'detail',
                    component:Detail,
                }
            ]
        },
    ]
})

Cats.vue

<template>
  <div>
    <ul>
      <li v-for="(cat,index) in cats" :key="index">
        <p>喵喵名：{{cat.name}}
         <button @click="pushDetail(cat)">push导航button>
        p>
      li>
    ul>
    <router-view>router-view>
  div>
template>

<script>
export default {
  name:"Cats",
  data(){
    return {
      cats:[{
        name:"憨瓜",
        age:"3岁",
        sex:"公"
      },{
        name:"波妞",
        age:"3岁",
        sex:"母",
      }]
    }
  },
  methods:{
    //编程式路由导航push
    pushDetail(cat){
      this.$router.push({
        path:'/cats/detail',
        query:{
          name:cat.name,
          age:cat.age,
          sex:cat.sex
        }
      })
    }
  }
}
script>

Detail.vue

<template>
  <div>
    <p>姓名：{{$route.query.name}}，年龄：{{$route.query.age}}，性别：{{$route.query.sex}}，已绝育，育苗已打p>
  div>
template>

<script>
export default {
  name:"Detail",
}
script>

运行结果

四、编程式路由导航与声明式路由导航对比

1、声明式路由导航（router-link）会被转化为标签，编程式路由导航可以实现随意标签，并且可以设置路由跳转条件

2、声明式导航写在template内，编程式路由导航一般写在methods内

3、导航到不同的位置

声明式	编程式
	$router.push(...)

4、替换当前位置

声明式	编程式
	$router.replace(...)