vue-router

  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 })