- useRouter()
-
除了使用 <router-link> 创建路由|声明式路由，还可以借助
router 实例方法实现
编程式路由类似于 <a> 和 location.href 的关系；详细情况，请参考
路由思维导图全局注入的函数，用于获取路由器实例，以便操作路由 ，如 push、replace、go 等
需引入路由包 useRouter 并创建路由实例 router；模块化开发请参考
Module可以使用普通路由 path；也可以使用查询路由 query 、动态路由 params
无法指定 meta；应在路由配置中指定 meta
import { useRouter } from 'vue-router'
const router = useRouter()
router 的常用实例方法
| 分类 |
说明 |
| push |
导航时向 history 添加新记录|压入路由，并跳转到目标；单击 <router-link> 时触发；可以逐级返回 |
| replace |
导航时不会向 history 添加新记录，替换|取代了当前的条目；不可返回 |
| go(n) |
导航到历史记录中的特定位置；可以前进或后退；参数 n 是一个整数，相对于当前位置的偏移量 |
| back() |
后退一级；相当于 go(-1) |
| forward() |
前进一级；相当于 go(1) |
使用示例 - 在事件处理函数中实现。这里略
// 普通路由
router.push('/user')
// 传参路由/查询路由 /register?plan=private
router.push('/user?id=100')
router.push({ path: '/user', query: { id: 100 } })
// 传参路由/动态路由
// 直接拼接
router.push('/user/100')
// id = 100
router.push('/user/' + id.value)
// 使用模板字符串
router.push(`/details/${id.value}`)
// 使用对象 - 只能使用命令路由 name
router.push({ name: 'details', params: { id: id.value } })
router.push({ name: 'user', params: { id: 100 } })
// 使用路由其它属性，如禁止返回路由
router.push({ path: '/user', query: { id: 100 }, replace: true })
router.replace({ path: '/user', query: { id: 100 } })
- [] 加载完毕后跳转至首页 - 在生命周期函数中，使用延时 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 => {})
})
- [] 找人代付 - 添加用户订单信息作为查询路由参数
- 略
- $router
-
以上是在逻辑中实现编程式导航
可以在模板/结构中直接使用全局路由变量 $router 实现
无须导入路由包 useRouter 并实例化，更加简洁
- [] 动态路由使用；查询路由同理
-
<button @click="$router.push('/details/1')">to demo</button>
<button @click="$router.push('/details/' + id)">to demo</button>
<button @click="$router.push({ name: 'details', params: { id: 1 } })">to demo</button>
<button @click="$router.push({ name: 'details', params: { id } })">to demo</button>