Ethan_Zhang

# 路由进阶

简单介绍一下RouterLink的属性

  • to：用于指定跳转路径
  • tag：用于指定RouterLink被渲染为什么标签，比如下面的代码将会被渲染为li而不是a标签
<RouterLink tag="li"></RouterLink>
  • replace：不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上个页面中
  • active-calss：当RouterLink对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-calss可以修改默认的名称。

# query属性

  1. 切换路由并传递参数用法

方法一：to的字符串写法

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

方法二：to的对象写法

<router-link
  :to="{
    path:'/home/message/detail',
    query:{
      id:666,
      name:"张三"
    }
  }"
  >跳转</router-link>
  1. 接收参数
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query.id)
</script>

# params属性

  1. 跳转路由并携带params参数

方法一：to的字符串写法

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

方法二：to的对象写法

<li v-for="m in list" :key="m.id">
  <router-link
    :to="{
      name:'messageDetail',
      params:{
        id:m.id,
        name:m.name
      }
    }"
    >
  跳转
  </router-link>
</li>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

  1. 接收参数
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)
</script>

# props配置

作用：让路由组件更方便的收到参数

方法一：值为对象，该对象中的所有key-value都会以props的形式传给Detail组件

方法二：值为布尔值，把路由收到的所有params参数通过props传给Detail组件

方法三：值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件

{
  name:"detail",
  path:"detail/:id",
  component:Detail,
  // 方法一：props的值为对象
  props:{ id:21, name:"小七" },
  // 方法二：值为布尔值
  props:true,
  // 方法三：值为函数
  props(route){
    return {
      id:route.query.id,
      name:route.query.name
    }
  }  
}

# 编程式路由导航

作用：不借助RouterLink实现路由跳转，让路由跳转更加灵活

<script setup>
import { useRouter } from 'vue-router'

router.push({
  name:"detail",
  params:{
    id:1,
    name:"小七"
  }
})

router.replace({
  name:"detail",
  params:{
    id:1,
    name:"小七"
  }
})

router.go(n) // 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
</script>

← 异步组件 →