Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CSDN 技术社区
skill_tree_vue
提交
9cf795f2
S
skill_tree_vue
项目概览
CSDN 技术社区
/
skill_tree_vue
通知
5
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
S
skill_tree_vue
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
9cf795f2
编写于
4月 20, 2022
作者:
Z
zhaoss
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
2.2.3小节习题、关键字添加
上级
aac02038
变更
8
显示空白变更内容
内联
并排
Showing
8 changed file
with
148 addition
and
7 deletion
+148
-7
data/2.Vue中阶/2.Vue-router/1.vue-router是什么?/exercises.json
data/2.Vue中阶/2.Vue-router/1.vue-router是什么?/exercises.json
+1
-1
data/2.Vue中阶/2.Vue-router/2.路由安装/exercises.json
data/2.Vue中阶/2.Vue-router/2.路由安装/exercises.json
+1
-1
data/2.Vue中阶/2.Vue-router/3.编程式的导航/config.json
data/2.Vue中阶/2.Vue-router/3.编程式的导航/config.json
+7
-2
data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.json
data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.json
+8
-0
data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.md
data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.md
+123
-0
data/2.Vue中阶/7.自定义指令/1.注册自定义指令/config.json
data/2.Vue中阶/7.自定义指令/1.注册自定义指令/config.json
+1
-0
data/3.Vue高阶/8.Vue源码解析/2.Object.defineProperty()/config.json
data/3.Vue高阶/8.Vue源码解析/2.Object.defineProperty()/config.json
+1
-1
data/tree.json
data/tree.json
+6
-2
未找到文件。
data/2.Vue中阶/2.Vue-router/1.vue-router是什么?/exercises.json
浏览文件 @
9cf795f2
{
"type"
:
"code_options"
,
"author"
:
null
,
"author"
:
"zhaoss"
,
"source"
:
"exercises.md"
,
"notebook_enable"
:
false
,
"exercise_id"
:
"ae1fe8c628e74e8790d3a216d7d78fe0"
...
...
data/2.Vue中阶/2.Vue-router/2.路由安装/exercises.json
浏览文件 @
9cf795f2
{
"type"
:
"code_options"
,
"author"
:
null
,
"author"
:
"zhaoss"
,
"source"
:
"exercises.md"
,
"notebook_enable"
:
false
,
"exercise_id"
:
"3abb616d5005498e8487d4a007263a2e"
...
...
data/2.Vue中阶/2.Vue-router/3.编程式的导航/config.json
浏览文件 @
9cf795f2
{
"node_id"
:
"vue-35a33dafa3c74a3584269e6317cd7e09"
,
"keywords"
:
[],
"keywords"
:
[
"编程式的导航"
],
"children"
:
[],
"export"
:
[
"exercises.json"
],
"keywords_must"
:
[],
"keywords_must"
:
[
"Vue"
],
"keywords_forbid"
:
[]
}
\ No newline at end of file
data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.json
0 → 100644
浏览文件 @
9cf795f2
{
"type"
:
"code_options"
,
"author"
:
null
,
"source"
:
"exercises.md"
,
"notebook_enable"
:
false
,
"exercise_id"
:
"0b9df39086d141fc992abfcfa2ace8fc"
}
\ No newline at end of file
data/2.Vue中阶/2.Vue-router/3.编程式的导航/exercises.md
0 → 100644
浏览文件 @
9cf795f2
# 编程式的导航
<div
style=
"color: pink;"
>
小常识:
</div>
<br>
**编程式导航**
除了使用
`<router-link>`
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
**导航到不同的位置**
注意:在 Vue 实例中,你可以通过
`$router`
访问路由实例。因此你可以调用
`this.$router.push`
。
想要导航到不同的 URL,可以使用
`router.push`
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击
`<router-link>`
时,内部会调用这个方法,所以点击
`<router-link :to="...">`
相当于调用
`router.push(...)`
:
|声明式 | 编程式 |
|--|--|
|
`<router-link :to="...">`
|
`router.push(...)`
|
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
```
javascript
// 字符串路径
router
.
push
(
'
/users/eduardo
'
)
// 带有路径的对象
router
.
push
({
path
:
'
/users/eduardo
'
})
// 命名的路由,并加上参数,让路由建立 url
router
.
push
({
name
:
'
user
'
,
params
:
{
username
:
'
eduardo
'
}
})
// 带查询参数,结果是 /register?plan=private
router
.
push
({
path
:
'
/register
'
,
query
:
{
plan
:
'
private
'
}
})
// 带 hash,结果是 /about#team
router
.
push
({
path
:
'
/about
'
,
hash
:
'
#team
'
})
```
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path :
```
javascript
const
username
=
'
eduardo
'
// 我们可以手动建立 url,但我们必须自己处理编码
router
.
push
(
`/user/
${
username
}
`
)
// -> /user/eduardo
// 同样
router
.
push
({
path
:
`/user/
${
username
}
`
})
// -> /user/eduardo
// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
router
.
push
({
name
:
'
user
'
,
params
:
{
username
}
})
// -> /user/eduardo
// `params` 不能与 `path` 一起使用
router
.
push
({
path
:
'
/user
'
,
params
:
{
username
}
})
// -> /user
```
由于属性
`to`
与
`router.push`
接受的对象种类相同,所以两者的规则完全相同。
`router.push`
和所有其他导航方法都会返回一个 Promise,让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。
**替换当前位置**
它的作用类似于 router.push,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。
| 声明式 | 编程式 |
|--|--|
|
<router-link
:to=
"..."
replace
>
| router.replace(...) |
也可以直接在传递给
`router.push`
的
`routeLocation`
中增加一个属性
`replace: true :`
```
javascript
router
.
push
({
path
:
'
/home
'
,
replace
:
true
})
// 相当于
router
.
replace
({
path
:
'
/home
'
})
```
**横跨历史**
该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于 window.history.go(n)。
例子
```
javascript
// 向前移动一条记录,与 router.forward() 相同
router
.
go
(
1
)
// 返回一条记录,与router.back() 相同
router
.
go
(
-
1
)
// 前进 3 条记录
router
.
go
(
3
)
// 如果没有那么多记录,静默失败
router
.
go
(
-
100
)
router
.
go
(
100
)
```
**篡改历史**
你可能已经注意到,
`router.push、router.replace`
和
`router.go`
是
`window.history.pushState、window.history.replaceState`
和
`window.history.go`
的翻版,它们确实模仿了
`window.history 的 API`
。
因此,如果你已经熟悉 Browser History APIs,在使用 Vue Router 时,操作历史记录就会觉得很熟悉。
值得一提的是,无论在创建路由器实例时传递什么样的
`history`
配置,
`Vue Router`
的导航方法
`(push、replace、go)`
都能始终如一地工作。
<br>
<div
style=
"color: pink;"
>
小测试:
</div
>
观察下列编程式导航,描述不正确的是?
<br/><br/>
## 答案
router.push({ path: '/user', params: { username:'eduardo' } }) 导航的结果是/user/eduardo
## 选项
### A
带 hash的导航router.push({ path: '/about', hash: '#team' }),结果是 /about#team
### B
带查询参数的导航router.push({ path: '/register', query: { plan: 'private' } })
### C
to 与 router.push 接受的对象种类相同,所以两者的规则完全相同。
data/2.Vue中阶/7.自定义指令/1.注册自定义指令/config.json
浏览文件 @
9cf795f2
...
...
@@ -3,6 +3,7 @@
"keywords"
:
[],
"children"
:
[],
"export"
:
[
"exercises.json"
],
"keywords_must"
:
[],
"keywords_forbid"
:
[]
...
...
data/3.Vue高阶/8.Vue源码解析/2.Object.defineProperty()/config.json
浏览文件 @
9cf795f2
...
...
@@ -3,7 +3,7 @@
"keywords"
:
[],
"children"
:
[],
"export"
:
[
"exercises.json"
],
"keywords_must"
:
[],
"keywords_forbid"
:
[]
...
...
data/tree.json
浏览文件 @
9cf795f2
...
...
@@ -457,9 +457,13 @@
{
"编程式的导航"
:
{
"node_id"
:
"vue-35a33dafa3c74a3584269e6317cd7e09"
,
"keywords"
:
[],
"keywords"
:
[
"编程式的导航"
],
"children"
:
[],
"keywords_must"
:
[],
"keywords_must"
:
[
"Vue"
],
"keywords_forbid"
:
[]
}
},
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录