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

云近

vue3声明式和编程式导航

在组件内部，可以使用  router 属性访问路由，例如 this.router 属性访问路由，例如 this. router属性访问路由，例如this.router.push(…)。
如果使用组合式 API，你可以通过调用 useRouter() 来访问路由器，导入后赋值给变量就行了，如：const router = useRouter();
声明式编程式<router-link :to=“…”>router.push(…)<router-link :to=“…” replace>替换路由：router.replace(…)替换路由或：router.push({ path: ‘/home’, replace: true })，相当于router.replace({ path: ‘/home’ })
编程式router.push(…) 多种写法

1. // 字符串路径
   
2. router.push('/users/eduardo')
   
3. 
   
4. // 带有路径的对象
   
5. router.push({ path: '/users/eduardo' })
   
6. 
   
7. // 除了 path 之外，你还可以为任何路由提供 name
   
8. // 命名的路由，并加上参数，让路由建立 url
   
9. // 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
   
10. // 路由将导航到路径 /user/erina
    
11. // 所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名，路由器只会保留最后那一条。
    
12. router.push({ name: 'user', params: { username: 'eduardo' } })
    
13. <router-link :to="{ name: 'user', params: { username: 'erina' }}">
    
14.   User
    
15. </router-link>
    
16. 
    
17. // 带查询参数，结果是 /register?plan=private
    
18. router.push({ path: '/register', query: { plan: 'private' } })
    
19. 
    
20. // 带 hash，结果是 /about#team
    
21. router.push({ path: '/about', hash: '#team' })
    
22. 
    
23. // `params` 不能与 `path` 一起使用，如果提供了 path，params 会被忽略
    
24. router.push({ path: '/user', params: { username } }) // -> /user

复制代码

router.push 和所有其他导航方法都会返回一个 Promise，让我们可以等到导航完成后才知道是成功还是失败。

导航横跨历史

1. // 向前移动一条记录，与 router.forward() 相同
   
2. router.go(1)
   
3. 
   
4. // 返回一条记录，与 router.back() 相同
   
5. router.go(-1)
   
6. 
   
7. // 前进 3 条记录
   
8. router.go(3)
   
9. 
   
10. // 如果没有那么多记录，静默失败
    
11. router.go(-100)
    
12. router.go(100)

复制代码

router.push、router.replace 和 router.go 是window.history.pushState，window.history.replaceState 和 window.history.go 的翻版，它们模仿了 window.history 的 API。

为什么vue3中声明响应式一般用const

为什么Vue3中声明响应式对象一般用const。如

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

复制代码

因为 Vue 的响应式系统是通过属性访问进行追踪的(响应式数据对象的属性的副作用函数的订阅)，因此我们必须始终保持对该响应式对象的相同引用。
副作用订阅将被存储在一个全局的 WeakMap<target, Map<key, Set>> 数据结构中。

防止响应式被替换丢失链接

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

复制代码

而如果使用const进行声明的话，state不允许被重新赋值。可以用声明变量上方式响应式链接丢失。防止原响应式对象在WeakMap中失去。
当我们将响应式对象的属性****赋值给变量或解构至本地变量时，或是将该属性传入一个函数时，我们会失去响应性，即赋值或结构到的变量或参数函数不会引起响应式数据的变化，原响应式数据的变化也不会引起本地变量的变化。

1. const state = reactive({ count: 0 })
   
2. 
   
3. // n 是一个局部变量，同 state.count
   
4. // 失去响应性连接
   
5. let n = state.count
   
6. // 不影响原始的 state
   
7. n++
   
8. 
   
9. // count 也和 state.count 失去了响应性连接
   
10. let { count } = state
    
11. // 不会影响原始的 state
    
12. count++
    
13. 
    
14. // 该函数接收一个普通数字，并且
    
15. // 将无法跟踪 state.count 的变化
    
16. callSomeFunction(state.count)

复制代码

使用ref维持响应式

Vue3使用ref来给所有变量声明响应式。通过ref.value来访问数据对象，ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象：

1. const count = ref(0)
   
2. 
   
3. console.log(count) // { value: 0 }
   
4. console.log(count.value) // 0
   
5. 
   
6. count.value++
   
7. console.log(count.value) // 1
   
8. 
   
9. const objectRef = ref({ count: 0 })
   
10. // 这是响应式的替换
    
11. objectRef.value = { count: 1 }

复制代码

ref对象的value也是响应式的。当ref传入的参数数据是复合数据类型时，会使用reactive自动转化value属性。

1. 简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到 组合函数 中。

复制代码

ref 被传递给函数或是从一般对象上被解构时，ref不会丢失响应性：
即可以传递响应式数据进行操作。如函数式编程。

1. const obj = {
   
2.   foo: ref(1),
   
3.   bar: ref(2)
   
4. }
   
5. 
   
6. // 该函数接收一个 ref
   
7. // 需要通过 .value 取值
   
8. // 但它会保持响应性
   
9. callSomeFunction(obj.foo)
   
10. 
    
11. // 仍然是响应式的
    
12. const { foo, bar } = obj

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322381zmg.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！