Skip to content

Commit 4921b53

Browse files
dily3825002dily3825002
committed
add route
1 parent 6f68127 commit 4921b53

File tree

5 files changed

+266
-0
lines changed

5 files changed

+266
-0
lines changed

‎路由/动态路由.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
4+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
5+
</head>
6+
<body>
7+
8+
<div id="app">
9+
<h1>Hello App!</h1>
10+
<p>
11+
<!-- 使用 router-link 组件来导航. -->
12+
<!-- 通过传入 `to` 属性指定链接. -->
13+
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
14+
<router-link to="/user/foo">Go to Foo</router-link>
15+
<router-link to="/user/bar">Go to Bar</router-link>
16+
</p>
17+
<!-- 路由出口 -->
18+
<!-- 路由匹配到的组件将渲染在这里 -->
19+
<router-view></router-view>
20+
</div>
21+
22+
<script>
23+
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
24+
25+
// 1. 定义 (路由) 组件。
26+
// 可以从其他文件 import 进来
27+
const Foo = { template: '<div>foo</div>' }
28+
const Bar = { template: '<div>bar</div>' }
29+
const User = {
30+
template: '<div>User {{$route.params.id}}</div>' ,
31+
watch: {
32+
'$route'(to,from){
33+
// 对路由变化作出响应...
34+
console.log("to:"+to.path+" from:"+from.path);
35+
}
36+
}
37+
}
38+
const Info404 = { template: '<div>404</div>' }
39+
40+
// 2. 定义路由
41+
// 每个路由应该映射一个组件。 其中"component" 可以是
42+
// 通过 Vue.extend() 创建的组件构造器，
43+
// 或者，只是一个组件配置对象。
44+
// 我们晚点再讨论嵌套路由。
45+
const routes = [
46+
{ path: '/foo', component: Foo },
47+
{ path: '/bar', component: Bar }
48+
]
49+
50+
// 3. 创建 router 实例，然后传 `routes` 配置
51+
// 你还可以传别的配置参数, 不过先这么简单着吧。
52+
const router = new VueRouter({
53+
// routes // (缩写) 相当于 routes: routes
54+
routes:[
55+
// 动态路径参数 以冒号开头
56+
{ path: '/user/:id', component: User },
57+
{ path: '*', component: Info404 }
58+
]
59+
})
60+
61+
// 4. 创建和挂载根实例。
62+
// 记得要通过 router 配置参数注入路由，
63+
// 从而让整个应用都有路由功能
64+
const app = new Vue({
65+
router
66+
}).$mount('#app')
67+
68+
// 现在，应用已经启动了！
69+
</script>
70+
71+
</body>
72+
</html>

‎路由/命名视图.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
4+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
5+
</head>
6+
<body>
7+
8+
<div id="app">
9+
<router-view></router-view>
10+
<router-view name="a"></router-view>
11+
<router-view name="b"></router-view>
12+
</div>
13+
14+
<script>
15+
16+
const Foo = {
17+
template: '<div>Foo {{ $route.params.id }}</div>'
18+
}
19+
20+
const Bar = {
21+
template: '<div>Bar {{ $route.params.id }}</div>'
22+
}
23+
24+
const Zoo = {
25+
template: '<div>Zoo {{ $route.params.id }}</div>'
26+
}
27+
28+
// 确保正确使用 components 配置 (带上 s)
29+
const router = new VueRouter({
30+
routes: [
31+
{ path: '/',
32+
components: {
33+
default:Foo,
34+
a:Bar,
35+
b:Bar
36+
}
37+
}
38+
]
39+
})
40+
41+
const app = new Vue({
42+
router
43+
}).$mount('#app')
44+
45+
</script>
46+
47+
</body>
48+
</html>

‎路由/嵌套路由.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
4+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
5+
</head>
6+
<body>
7+
8+
<div id="app">
9+
<router-view></router-view>
10+
</div>
11+
12+
<script>
13+
const User = {
14+
template: `
15+
<div class="user">
16+
<h2>User {{ $route.params.id }}</h2>
17+
<router-view></router-view>
18+
</div>
19+
`
20+
}
21+
22+
const UserProfile = {
23+
template: '<div>UserProfile1 {{ $route.params.id }}</div>'
24+
}
25+
26+
const UserPosts = {
27+
template: '<div>UserPosts2 {{ $route.params.id }}</div>'
28+
}
29+
30+
const router = new VueRouter({
31+
routes: [
32+
{ path: '/user/:id', component: User,
33+
children: [
34+
{
35+
// 当 /user/:id/profile 匹配成功，
36+
// UserProfile 会被渲染在 User 的 <router-view> 中
37+
path: 'profile',
38+
component: UserProfile
39+
},
40+
{
41+
// 当 /user/:id/posts 匹配成功
42+
// UserPosts 会被渲染在 User 的 <router-view> 中
43+
path: 'posts',
44+
component: UserPosts
45+
}
46+
]
47+
}
48+
]
49+
})
50+
51+
const app = new Vue({
52+
router
53+
}).$mount('#app')
54+
55+
</script>
56+
57+
</body>
58+
</html>

‎路由/起步.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
4+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
5+
</head>
6+
<body>
7+
8+
<div id="app">
9+
<h1>Hello App!</h1>
10+
<p>
11+
<!-- 使用 router-link 组件来导航. -->
12+
<!-- 通过传入 `to` 属性指定链接. -->
13+
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
14+
<router-link to="/foo">Go to Foo</router-link>
15+
<router-link to="/bar">Go to Bar</router-link>
16+
</p>
17+
<!-- 路由出口 -->
18+
<!-- 路由匹配到的组件将渲染在这里 -->
19+
<router-view></router-view>
20+
</div>
21+
22+
<script>
23+
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
24+
25+
// 1. 定义 (路由) 组件。
26+
// 可以从其他文件 import 进来
27+
const Foo = { template: '<div>foo</div>' }
28+
const Bar = { template: '<div>bar</div>' }
29+
30+
// 2. 定义路由
31+
// 每个路由应该映射一个组件。 其中"component" 可以是
32+
// 通过 Vue.extend() 创建的组件构造器，
33+
// 或者，只是一个组件配置对象。
34+
// 我们晚点再讨论嵌套路由。
35+
const routes = [
36+
{ path: '/foo', component: Foo },
37+
{ path: '/bar', component: Bar }
38+
]
39+
40+
// 3. 创建 router 实例，然后传 `routes` 配置
41+
// 你还可以传别的配置参数, 不过先这么简单着吧。
42+
const router = new VueRouter({
43+
routes // (缩写) 相当于 routes: routes
44+
})
45+
46+
// 4. 创建和挂载根实例。
47+
// 记得要通过 router 配置参数注入路由，
48+
// 从而让整个应用都有路由功能
49+
const app = new Vue({
50+
router
51+
}).$mount('#app')
52+
53+
// 现在，应用已经启动了！
54+
</script>
55+
56+
</body>
57+
</html>

‎路由/路由组建传参.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<html>
2+
<head>
3+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
4+
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
5+
</head>
6+
<body>
7+
8+
<div id="app">
9+
<router-view></router-view>
10+
</div>
11+
12+
<script>
13+
const User = {
14+
props: ['id'],
15+
template: '<div>User {{ id }}</div>'
16+
}
17+
const router = new VueRouter({
18+
routes: [
19+
{ path: '/user/:id', component: User, props: true
20+
}
21+
]
22+
})
23+
24+
const app = new Vue({
25+
router
26+
}).$mount('#app')
27+
28+
</script>
29+
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)