vue3之声明式和编程式导航详解

// 字符串路径
router.push('/users/eduardo')

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

// 除了 path 之外，你还可以为任何路由提供 name
// 命名的路由，并加上参数，让路由建立 url
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
// 路由将导航到路径 /user/erina
// 所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。
router.push({ name: 'user', params: { username: 'eduardo' } })
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

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

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

// `params` 不能与 `path` 一起使用，如果提供了 path，params 会被忽略
router.push({ path: '/user', params: { username } }) // -> /user

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

import { reactive } from 'vue'
const state = reactive({ count: 0 })

let state = reactive({ count: 0 })

// 上面的引用 ({ count: 0 }) 将不再被追踪（响应性连接已丢失！）
state = reactive({ count: 1 })

const state = reactive({ count: 0 })

// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state
n++

// count 也和 state.count 失去了响应性连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收一个普通数字，并且
// 将无法跟踪 state.count 的变化
callSomeFunction(state.count)

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

const objectRef = ref({ count: 0 })
// 这是响应式的替换
objectRef.value = { count: 1 }

const obj = {
  foo: ref(1),
  bar: ref(2)
}

// 该函数接收一个 ref
// 需要通过 .value 取值
// 但它会保持响应性
callSomeFunction(obj.foo)

// 仍然是响应式的
const { foo, bar } = obj