cncml手绘网

标题: Vue.js 路由 [打印本页]
作者: admin    时间: 2018-7-4 11:44
标题: Vue.js 路由
本章节我们将为大家介绍 Vue.js 路由。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router文档。
安装1、直接下载 / CDN
  1. https://unpkg.com/vue-router/dist/vue-router.js
复制代码

' r3 E! W, P5 |: X4 R; ^+ i( x: U( D& E$ n/ H" y. N
NPM
推荐使用淘宝镜像：
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
HTML 代码
* v3 x  E. O$ b0 |5 l7 A
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>5 ~' t2 f6 M$ I! K! K, j
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>6 v+ A- s& W( O, P+ V$ A, Y

  3. 0 z  l, z+ G% @% h( @
  4. <div id="app">
    & N3 P6 m- _: q0 i
  5.   <h1>Hello App!</h1>
    ' A0 U8 o1 W& r* \
  6.   <p>, n; q( x; a* U: t$ J
  7.     <!-- 使用 router-link 组件来导航. -->
    , p$ F# F+ A0 L2 Y7 k3 w
  8.     <!-- 通过传入 `to` 属性指定链接. -->
    $ ^0 ~7 W* t6 J7 a" m6 b) i
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    5 Y: N! s% ]9 Q" ?0 j
  10.     <router-link to="/foo">Go to Foo</router-link>
      O8 |* x3 e  t5 S+ }- N
  11.     <router-link to="/bar">Go to Bar</router-link>+ a* U% K! \% e( |
  12.   </p>9 Z0 ^4 |, Z( p9 T# r5 ~% E
  13.   <!-- 路由出口 -->
    - ^! a4 j+ a3 \) h4 W
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    ( e7 _3 M: {  ^5 c) Z' S" H, _
  15.   <router-view></router-view>
    1 H& q! C  J2 f
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)% H; H/ y4 Z7 W' E

  2. ) ]+ z7 I  M( z) ~+ r! A% L
  3. // 1. 定义（路由）组件。
    7 x# {1 L. v* F' X) ]9 ]4 g% i$ \
  4. // 可以从其他文件 import 进来
    , O; C3 C9 b4 S( a3 }9 W5 b  R
  5. const Foo = { template: '<div>foo</div>' }  t2 e6 h8 Q0 }, L8 q
  6. const Bar = { template: '<div>bar</div>' }
    : r8 r9 ]7 p( W4 U1 d* U

  7. - h. W1 |) F% C5 Q5 l$ P
  8. // 2. 定义路由
    2 l1 E* @6 Z/ n, q
  9. // 每个路由应该映射一个组件。 其中"component" 可以是) o4 V, M$ G6 E
  10. // 通过 Vue.extend() 创建的组件构造器，+ C' E; O4 N6 W: g& A7 {% A
  11. // 或者，只是一个组件配置对象。
    , T8 [; h+ }) ?4 {5 v& Z, |. `2 }) M
  12. // 我们晚点再讨论嵌套路由。
    + \: T4 M  m4 P) Q9 I
  13. const routes = [
    " V/ [' e7 Z+ n8 i( t  U
  14.   { path: '/foo', component: Foo },
    " P. w; s; y( [: I' ?, O
  15.   { path: '/bar', component: Bar }
    / g& i: a) U! Q
  16. ]
    : j9 W9 o( N- z  E+ G, u- @

  17. & N. O3 K' H# @9 J' c7 w4 T2 L
  18. // 3. 创建 router 实例，然后传 `routes` 配置+ q4 N  M6 L4 T$ q" h7 Y
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。
    2 X3 m* j# {9 o4 t, ?1 x6 \
  20. const router = new VueRouter({( \5 ]4 D# _' O" q  l; j$ l
  21.   routes // （缩写）相当于 routes: routes
    # a9 T/ N: w+ X3 G+ U
  22. })8 S8 y  G1 _$ C/ o" B
  23. . B6 N; m( Q5 ]) S  C* ?& _
  24. // 4. 创建和挂载根实例。
    / [( A/ D* e1 u" y7 s+ [0 Y
  25. // 记得要通过 router 配置参数注入路由，
    , |; X, a* a3 Z6 }  C. W
  26. // 从而让整个应用都有路由功能
    ) N! h7 c; j& e/ o9 \# w/ d
  27. const app = new Vue({$ ]3 r, a3 w% e- {% d# |3 ]2 O( ?8 l
  28.   router& v$ w, x+ N4 z) A, g/ B: ]
  29. }).$mount('#app')
    ) j; q* s- ]: q6 B) u" ~: {0 P

  30. 2 V, S, Y/ P' j6 N
  31. // 现在，应用已经启动了！
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：

" N: @5 W% v4 q0 q1 r
你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
  1. # 安装依赖，使用淘宝资源命令 cnpm5 ]4 u2 n" A0 g; ^% M
  2. cnpm install
    % h3 q0 `" F* j; L0 Q$ _) d2 |

  3. / j  a# F9 i  w! O8 U0 I: t
  4. # 启动应用，地址为 localhost:8080# a; ^% D- W. ]" h. d, r
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令：9 N2 }1 `% d1 `/ D+ G, ~
  1. cnpm run build
复制代码
; i3 {- @4 F! V+ p3 i0 }

7 r1 H0 L* O+ A3 _) u) P: Z1 \4 D3 z4 s% H
: ^3 ^0 L3 B. e' u$ v
: V' u2 F+ O- \4 K; ~/ L

5 D; |1 J* ~: s$ c# H# }' p0 D
7 C. e, @" J/ ]; |. p$ S' d; q6 x) O3 N4 b5 R6 @# T: S

% ~$ j5 M4 ~& e: F: [8 v8 `2 O& z3 Z7 Y: [) F7 T' U8 D5 ]
1 c3 u4 \% _6 S: n1 u" D

vue-router.js

63.76 KB, 下载次数: 2, 下载积分: 论坛积分 -2 分, 贡献值 -1 个, 好评度 -1 次

vue-2.0-simple-routing-example-master.zip

6.58 KB, 下载次数: 1, 下载积分: 论坛积分 -2 分, 贡献值 -1 个, 好评度 -1 次



欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2