-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patht1_路由选项.html
85 lines (85 loc) · 3.01 KB
/
t1_路由选项.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>t1_路由选项</title>
<script src="vue1.js"></script>
<script src="vue-router.js"></script>
<script>
//当创建路由器实例时，可以使用以下参数自定义路由器的行为。
/*
hashbang
默认值： true
只在 hash 模式下可用
当 hashbang 值为 true 时，所有的路径都会被格式化为以 #! 开头。例如 router.go('/foo/bar') 会把浏览器的 URL 设为 example.com/#!/foo/bar 。
*/
/*
history
默认值： false
启用 HTML5 history 模式。利用 history.pushState() 和 history.replaceState() 来管理浏览历史记录。
注意： 当使用 HTML5 history 模式时，服务器需要被正确配置 以防用户在直接访问链接时会遇到404页面。
*/
/*
abstract
默认值： false
使用一个不依赖于浏览器的浏览历史虚拟管理后端。虚拟模式在测试或者实际的 URL 并不重要时，非常有用。例如 Electron 或者 Cordova 应用。在非浏览器模式下，路由器同样会退化为抽象模式。
*/
/*
root
默认值： null
只在 HTML5 history 模式下可用
定义路由根路径。在 router.go() 、v-link 以及在路由对象中配置的所有路径都会解析为此根路径的相对路径，根路径总是会出现在浏览器地址栏的 URL 中。
例如，对于 root: '/foo' ，v-link="/bar" 会把浏览器 URL 设置为 /foo/bar 。直接访问 /foo/bar 会匹配路由配置中的 /bar 。
多数情况下，在应用中并不需要关心 root 。
*/
/*
linkActiveClass
默认值： "v-link-active"
配置当 v-link 元素匹配的路径时需要添加到元素上的 class 。只要当前路径以 v-link 的 URL 开头，这个 class 就会被添加到这个元素上。活跃匹配的规则和添加的 class 也可以通过 v-link 的内联选项单独指定。
*/
/*
saveScrollPosition
默认值： false
只在 HTML5 history 模式下可用
当用户点击后退按钮时，借助 HTML5 history 中的 popstate 事件对应的 state 来重置页面的滚动位置。注意，当 <router-view> 设定了相应的场景切换效果时，这个可能不会得到预想的效果。
*/
/*
transitionOnLoad
默认值： false
在初次加载时是否对 <router-view> 处理场景切换效果。默认情况下，组件在初次加载时会直接渲染。
*/
/*
suppressTransitionError
默认值： false
当值为 true 时，在场景切换钩子函数中发生的异常会被吞掉。
*/
</script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<a v-link="{ name: 'foo', params: { username: 'matisha' }}">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<router-view></router-view>
</div>
<script>
var App = {}
var router = new VueRouter({
hashbang: false,
root: '/matisha'
})
router.map({
'/foo/:username': {
name: 'foo',
component: {template: '<p>用户名是{{$route.params.username}}</p>'},
},
'/bar': {
component: {template: '<p>jdskdskds</p>'},
}
})
router.start(App, '#app')
</script>
</body>
</html>