[Doc] Button: add route demo (#4068)

src/button/README.md

@@ -73,6 +73,13 @@ Vue.use(Button);
 <van-button type="primary" size="mini">Mini</van-button>
 ```
 
+### Route
+
+```html
+<van-button type="primary" url="//youzan.github.io/vant/mobile.html">URL</van-button>
+<van-button type="primary" to="index">Vue Router</van-button>
+```
+
 ## API
 
 ### Props

src/button/README.zh-CN.md

@@ -89,6 +89,15 @@ Vue.use(Button);
 <van-button type="primary" size="mini">迷你按钮</van-button>
 ```
 
+### 页面导航
+
+可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
+
+```html
+<van-button type="primary" url="//youzan.github.io/vant/mobile.html">URL 跳转</van-button>
+<van-button type="primary" to="index">路由跳转</van-button>
+```
+
 ## API
 
 ### Props

src/button/demo/index.vue

@@ -125,6 +125,19 @@
         {{ $t('mini') }}
       </van-button>
     </demo-block>
+
+    <demo-block :title="$t('router')">
+      <van-button
+        :text="$t('urlRoute')"
+        type="primary"
+        url="//youzan.github.io/vant/mobile.html"
+      />
+      <van-button
+        :text="$t('vueRoute')"
+        type="primary"
+        to="index"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -151,7 +164,10 @@ export default {
       round: '圆形按钮',
       hairline: '细边框',
       hairlineButton: '细边框按钮',
-      loadingText: '加载中...'
+      loadingText: '加载中...',
+      router: '页面导航',
+      urlRoute: 'URL 跳转',
+      vueRoute: '路由跳转'
     },
     'en-US': {
       type: 'Type',
@@ -173,7 +189,10 @@ export default {
       round: 'Round',
       hairline: 'Hairline',
       hairlineButton: 'Hairline',
-      loadingText: 'Loading...'
+      loadingText: 'Loading...',
+      router: 'Router',
+      urlRoute: 'URL',
+      vueRoute: 'Vue Router'
     }
   }
 };

src/button/test/__snapshots__/demo.spec.js.snap

@@ -31,5 +31,6 @@ exports[`renders demo correctly 1`] = `
     </span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
       迷你按钮
     </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
 </div>
 `;

src/cell/README.md

@@ -57,8 +57,8 @@ Vue.use(Cell).use(CellGroup);
 
 ```html
 <van-cell-group>
-  <van-cell title="Cell title" is-link url="//youzan.github.io/vant/mobile.html" />
-  <van-cell title="Cell title" is-link to="index" />
+  <van-cell title="URL" is-link url="//youzan.github.io/vant/mobile.html" />
+  <van-cell title="Vue Router" is-link to="index" />
 </van-cell-group>
 ```
 

src/cell/README.zh-CN.md

@@ -55,13 +55,13 @@ Vue.use(Cell).use(CellGroup);
 <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
 ```
 
-### 页面跳转
+### 页面导航
 
-可以通过`url`属性进行页面跳转，或通过`to`属性进行 vue-router 跳转
+可以通过`url`属性进行 URL 跳转，或通过`to`属性进行路由跳转
 
 ```html
-<van-cell title="单元格" is-link url="//youzan.github.io/vant/mobile.html" />
-<van-cell title="单元格" is-link to="index" />
+<van-cell title="URL 跳转" is-link url="//youzan.github.io/vant/mobile.html" />
+<van-cell title="路由跳转" is-link to="index" />
 ```
 
 ### 分组标题

src/cell/demo/index.vue

@@ -60,12 +60,12 @@
 
     <demo-block :title="$t('router')">
       <van-cell
-        :title="$t('cell')"
+        :title="$t('urlRoute')"
         is-link
         url="//youzan.github.io/vant/mobile.html"
       />
       <van-cell
-        :title="$t('cell')"
+        :title="$t('vueRoute')"
         is-link
         to="index"
       />
@@ -122,7 +122,9 @@ export default {
       largeSize: '单元格大小',
       group: '分组',
       groupTitle: '分组标题',
-      router: '页面跳转'
+      router: '页面导航',
+      urlRoute: 'URL 跳转',
+      vueRoute: '路由跳转'
     },
     'en-US': {
       cell: 'Cell title',
@@ -132,7 +134,9 @@ export default {
       largeSize: 'Size',
       group: 'Group',
       groupTitle: 'Group Title',
-      router: 'Router'
+      router: 'Router',
+      urlRoute: 'URL',
+      vueRoute: 'Vue Router'
     }
   }
 };

src/cell/test/__snapshots__/demo.spec.js.snap

@@ -58,11 +58,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+      <div class="van-cell__title"><span>URL 跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
     <div class="van-cell van-cell--clickable">
-      <div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+      <div class="van-cell__title"><span>路由跳转</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
         <!----></i>
     </div>
   </div>