I have been using it in the previous study
声明式导航, start learning here编程式导航
pushNavigation, this method will add a new record to the history stack, so when the user clicks the browser back button, they will return to the previous URL.
Declarative Navigation
<template>
// 字符串路径
<router-link to="/user">1</router-link>
// 带有路径的对象
<router-link :to="{ path:'/user'}">2</router-link>
// 命名的路由
<router-link :to="{ name:'User'}">3</router-link>
// 命名的路由，并加上Restful风格传参，让路由建立 url
<router-link :to="{ name:'User', params:{userid:123, username:'张三'}}">4</router-link>
// 命名的路由，并加上传统风格传参，让路由建立 url
<router-link :to="{ name:'User', query:{userid:123, username:'张三'}}">5</router-link>
// 带 hash，结果是 /user#edit
<router-link :to="{ name:'User', hash:'#edit'}">5</router-link>
<router-view></router-view>
</template>
programmatic navigation
// 组合式
import {
useRouter} from 'vue-router'
const router = useRouter()
router.push('/user')
router.push({
path: '/user'})
router.push({
name: 'User'})
router.push({
name: 'User', params: {
userid: 123, username: '张三'}})
router.push({
name: 'User', query: {
userid: 123, username: '张三'}})
router.push({
name: 'User', hash:'#edit'})
// 选项式
this.$router.push('/user')
this.$router.push({
path: '/user'})
this.$router.push({
name: 'User'})
this.$router.push({
name: 'User', params: {
userid: 123, username: '张三'}})
this.$router.push({
name: 'User', hash:'#edit'})
replaceway of navigating, it works similar to router.push, the only difference is that it does not add new records to history when navigating, as its name implies - it replaces the current entry.
| Declarative | programmatic |
|---|---|
<router-link :to="..." replace> |
router.replace(...) |
You can also directly add an attribute replace: true to the routeLocation passed to router.push:
router.push({
path: '/home', replace: true })
// 相当于
router.replace({
path: '/home' })
goWay navigation, this method takes an integer as a parameter, indicating how many steps forward or backward in the history stack, similar to window.history.go(n)
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)
falsification of history
You may have noticed that router.push, router.replace, and router.go are duplicates of window.history.pushState, window.history.replaceState, and window.history.go, and they do mimic the API of window.history.
So if you're already familiar with Browser History APIs, manipulating history will feel familiar when using Vue Router.
It's worth mentioning that Vue Router's navigation methods ( push , replace , go ) always work correctly no matter what history configuration is passed when creating the router instance.