编程路由

@Router

以下两个函数仅在 Vue 3 的 Composition API 环境下使用

全局注入的函数，它返回一个 RouteLocationNormalized 对象，包含了当前路由的所有属性，如 path、params、query 等

用于在组件中获取当前激活的路由信息

需引入路由包 useRoute 并创建路由实例 route

import { useRoute } from 'vue-router'
const route = useRoute()

useRoute 常用属性
分类	说明
name	匹配的路由名称
path	经过百分号编码的 URL 中的 pathname 段
params	从 path 中提取出来并解码后的参数对象
query	代表当前地址的 search 属性的对象
matched	数组，只包含直接的组件 (任何已被加载并在 components 对象内被替换掉的懒加载组件) 可以被直接用于展示路由。不包含重定向记录

useRouter()

全局注入的函数，用于获取路由器实例，以便操作路由，如 push、replace、go 等

除了使用 <router-link> 创建路由|声明式路由，还可以借助 router 相关 API 实现编程路由；类似于 <a> 和 location.href 的关系

需引入路由包 useRouter 并创建路由实例 router

可以使用普通路由 path；也可以使用命名路由 name

可以指定路由参数 params 或 query

更多信息，请访问 useRouter

import { useRouter } from 'vue-router'
const router = useRouter()

useRouter 常用方法
分类	说明
push	导航时向 history 添加新记录\|压入路由，并跳转到目标；单击 <router-link> 时触发；可以逐级返回
replace	导航时不会向 history 添加新记录，替换\|取代了当前的条目；不可返回
go(n)	导航到历史记录中的特定位置；可以前进或后退；参数 n 是一个整数，相对于当前位置的偏移量
back()	后退一级；相当于 go(-1)
forward()	前进一级；相当于 go(1)

// 查询路由
router.push('/user?id=100')

// 查询路由，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 动态路由 - 静态和动态
router.push('/user/eduardo')
router.push({ path: '/detail/' + ind })

// 动态路由，并加上参数，让路由建立 url；只能使用命令路由name
router.push({ name: 'user', params: { username: 'eduardo' } })

//禁止返回路由
router.push({ path: '/user', query: { bread: 'user' }, replace: true })
router.replace({ path: '/user', query: { bread: 'user' } })

[] 加载完毕后跳转至首页 - 在生命周期函数中，使用延时 setTimeout 模拟实现

//引入
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

//使用 
const router = useRouter()
onMounted(()=>{
    setTimeout(()=>{
        //router.push('/home')
        router.replace('/home') //这里通常使用replace模式
    }, 3000)
})

[] 分享页面 - 添加商品 id 作为查询路由参数

分享 URL

const share = () => {
    router.push({ query: { id: 100 } })
}

使用 - 如果没有，就强推 999 号商品

onMounted(() => {
    let id = route.query.id || 999
    // axios.get(`/api/todo/${id}`).then(res => {})
})

[] 找人代付 - 添加用户订单信息作为查询路由参数

略