Vue-Router 第五节：命名路由 & 编程式导航

一、命名路由

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

没有硬编码的 URL
params 的自动编码/解码。
防止你在 url 中出现打字错误。
绕过路径排序

go 复制代码

   // router/index.ts
   {
        path: '/user/:id',
        name: 'user',                // 给路由命名
        component: import("@/views/user/index.vue")
    }

xml 复制代码

<!--  App.vue -->  
<router-link :to="{ name: 'user', params: { id: '12' } }">通过命名式进入user路由页面</router-link>

二、编程式导航

1、除了使用声明式<router-link> 创建 a 标签来定义导航链接，我们还可以通过编写代码借助router的实例方法来实现：router.push(...)

xml 复制代码

<template>
  <div> 
     <button @click="toPages">通过编程式式进入user路由页面</button>
  </div>
</template>


<script setup lang="ts">
  import { useRouter } from 'vue-router';
  const router = useRouter()
  const toPages = () => {
  router.push( '/user/12' )  
  // router.push({name:'user',params:{id:'12'}})
  // router.push({path:'/user',query:{id:'12'}})
}
</script>

2、push的参数可以是一个字符串路径也可以是一个对象。

php 复制代码

//  一个字符路径
router.push( '/user/12' )

//  带有路径的对象
router.push({path:'/user/12'})

//  命名的路由，并加上参数，让路由建立url
router.push({name:'user',params:{id:'12'}})

// 带查询参数， 结果是 /user?id=12
router.push({path:'/user',query:{id:'12'}})

// 带hash,结果是/user#12
router.push({path:'/user',hash:'12'})

3、路由传参方式： query、params

区别：

query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效

query 在路由配置不需要设置参数或者写为可选?，而 params 必须设置

query 传递的参数会显示在地址栏中，只能接受对象。

params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;