1 中文文档地址： https://router.vuejs.org/zh-cn/essentials/nested-routes.html
2 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
3
4 <p>
5 <router-link to="/user/1">Go to Foo</router-link>
6 <router-link to="/bar">Go to Bar</router-link>
7 </p>
8 <router-view></router-view>
9
10 const User = {
11 template: '<div>User {{ $route.params.id }}</div>'
12 }
13 const Bar= {
14 template: '<div>User</div>'
15 }
16
17 const router = new VueRouter({
18 routes: [
19 { path: '/user/:id', component: User },
20 { path: '/bar', component: Bar }
21 ]
22 })
23
24 var vue = new Vue({
25 router,
26 el:"#app"
27 })
28
29 二级路由：
30 const router = new VueRouter({
31 routes: [
32 {
33 path: '/user/:id',
34 component: User,
35 children: [
36 {
37 // 当 /user/:id 匹配成功，地址为空时跳转UserHome页面
38 // UserHome 会被渲染在 User 的 <router-view> 中
39 path: '',
40 component: UserHome
41 },
42 {
43 // 当 /user/:id/profile 匹配成功，
44 // UserProfile 会被渲染在 User 的 <router-view> 中
45 path: 'profile',
46 component: UserProfile
47 },
48 {
49 // 当 /user/:id/posts 匹配成功
50 // UserPosts 会被渲染在 User 的 <router-view> 中 ---> 需要注意
51 path: 'posts',
52 component: UserPosts
53 }
54 ]
55 }
56 ]
57 });
58 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径
59
60 编程式导航：
61
62 router.push(location)
63 1.// 字符串
64 router.push('home')
65 2.// 对象
66 router.push({ path: 'home' })
67 3.// 命名的路由
68 router.push({ name: 'user', params: { userId: 123 }})
69 4.// 带查询参数，变成 /register?plan=private
70 router.push({ path: 'register', query: { plan: 'private' }})
71 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)
72
73 router.replace(location)
74 跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
75 声明式：
76 <router-link :to="..." replace>
77 编程式：
78 router.replace(...)
79
80 router.go(n)
81 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
82 1.// 在浏览器记录中前进一步，等同于 history.forward()
83 router.go(1)
84 2.// 后退一步记录，等同于 history.back()
85 router.go(-1)
86 3.// 前进 3 步记录
87 router.go(3)
88 4.// 如果 history 记录不够用，那就默默地失败呗
89 router.go(-100)
90 router.go(100)
91
92 命名路由
93 有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称
94 const router = new VueRouter({
95 routes: [
96 {
97 path: '/user/:userId',
98 name: 'user',
99 component: User
100 }
101 ]
102 })
103 要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象
104 <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
105 这跟代码调用 router.push() 是一回事
106 router.push({ name: 'user', params: { userId: 123 }})
107 这两种方式都会把路由导航到 /user/123 路径
108 例子：
109 import Vue from 'vue'
110 import VueRouter from 'vue-router'
111
112 Vue.use(VueRouter)
113
114 const Home = { template: '<div>This is Home</div>' }
115 const Foo = { template: '<div>This is Foo</div>' }
116 const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
117
118 const router = new VueRouter({
119 mode: 'history',
120 base: __dirname,
121 routes: [
122 { path: '/', name: 'home', component: Home },
123 { path: '/foo', name: 'foo', component: Foo },
124 { path: '/bar/:id', name: 'bar', component: Bar }
125 ]
126 })
127
128 new Vue({
129 router,
130 template: `
131 <div id="app">
132 <h1>Named Routes</h1>
133 <p>Current route name: {{ $route.name }}</p>
134 <ul>
135 <li><router-link :to="{ name: 'home' }">home</router-link></li>
136 <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
137 <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
138 </ul>
139 <router-view class="view"></router-view>
140 </div> `
141 }).$mount('#app')
142
143 命名视图：
144 有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
145 html：
146 <script src="https://unpkg.com/vue/dist/vue.js"></script>
147 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
148
149 <div id="app">
150 <h1>Named Views</h1>
151 <ul>
152 <li>
153 <router-link to="/">/</router-link>
154 </li>
155 <li>
156 <router-link to="/other">/other</router-link>
157 </li>
158 </ul>
159 <router-view class="view one"></router-view>
160 <router-view class="view two" name="a"></router-view>
161 <router-view class="view three" name="b"></router-view>
162 </div>
163
164 js：
165 const Foo = { template: '<div>foo</div>' }
166 const Bar = { template: '<div>bar</div>' }
167 const Baz = { template: '<div>baz</div>' }
168
169 const router = new VueRouter({
170 mode: 'history',
171 routes: [
172 {
173 path: '/',
174 components: {
175 default: Foo,
176 a: Bar,
177 b: Baz
178 }
179 },
180 {
181 path: '/other',
182 components: {
183 default: Baz,
184 a: Bar,
185 b:Foo
186 }
187 }
188 ]
189 })
190
191 new Vue({
192 router,
193 el: '#app'
194 })
