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
复制代码
6 f# c' v  \* {0 `6 L, W* B

5 E( q6 J5 h% n5 S$ q- h5 GNPM
推荐使用淘宝镜像：
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
HTML 代码
; E( q1 ]0 B9 ^$ T9 x
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>- P; w- c( G  F' F1 Q6 V2 G
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>" v! `, G. F4 K2 ]& d+ H  O2 ~3 w

  3. % b0 f8 u" P& o& Z  U+ k$ U( C$ A3 r
  4. <div id="app">. U) z& [: o  E+ ?
  5.   <h1>Hello App!</h1>7 C4 s6 W, E6 N3 T& j) Q
  6.   <p>, O& A/ ]( l4 {
  7.     <!-- 使用 router-link 组件来导航. -->! S% S+ {! x1 [3 K8 o
  8.     <!-- 通过传入 `to` 属性指定链接. -->
    - J2 x" D" G# d1 k" R5 M# `$ @
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->7 t7 X* r: Q' Q* \' @% i9 C
  10.     <router-link to="/foo">Go to Foo</router-link>7 T$ E9 `  p; e, a9 z' }5 L
  11.     <router-link to="/bar">Go to Bar</router-link>' y( H5 L/ D. \* e( }
  12.   </p># I) p5 |8 R" j. |9 I6 D& w" I* k
  13.   <!-- 路由出口 -->. h' F# y9 j4 S1 e2 v! d3 W
  14.   <!-- 路由匹配到的组件将渲染在这里 -->! _. n0 d* x  \5 b- d
  15.   <router-view></router-view>
    0 t5 Q1 r- [& x+ Q' ^! e4 w3 L
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
    # _6 {5 Y# N, N) M; g( \. G

  2. & O% Y4 C7 `7 p- R! {( L% U/ Q
  3. // 1. 定义（路由）组件。
      V3 H9 @9 T: ]4 m; \
  4. // 可以从其他文件 import 进来
    ) m) _$ Z7 g5 f+ ~
  5. const Foo = { template: '<div>foo</div>' }
    1 x6 T6 P/ w, V( t2 g- I. ^  D  F& q
  6. const Bar = { template: '<div>bar</div>' }
    - s: C: z# B; m# ?; N) Z- X# P- f
  7. ' X, v3 t) ]" h' d+ _2 V
  8. // 2. 定义路由
    " x- a$ t3 g# n- N2 O* f2 _) }. @5 R
  9. // 每个路由应该映射一个组件。 其中"component" 可以是& X' ~, H$ A- _5 M4 E
  10. // 通过 Vue.extend() 创建的组件构造器，6 W" J; {8 @6 v3 b3 I4 E
  11. // 或者，只是一个组件配置对象。
    + v, a' F; ]% k9 [: ^; h. O3 z
  12. // 我们晚点再讨论嵌套路由。# U3 u& q, `) C8 Z' e2 k0 A
  13. const routes = [% f. c* p6 V5 m6 q5 V& D* T
  14.   { path: '/foo', component: Foo },1 J4 b; x) r  r/ j3 q$ x7 l) i+ T
  15.   { path: '/bar', component: Bar }
    ( I- Q0 |4 X. Y; G0 ~0 l2 Q. n( t
  16. ]
    5 u" Y5 C. n* E, I6 S
  17. ; G* @' N! `6 U# v% l
  18. // 3. 创建 router 实例，然后传 `routes` 配置8 I1 f3 a. y5 Y, q" p
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。
    # Y& v/ t) k$ K( ?! L: D  |
  20. const router = new VueRouter({
    2 Q+ ~, U; S. s4 l6 u. x% ^
  21.   routes // （缩写）相当于 routes: routes
    ! o! R( P" s7 L% g5 |& w
  22. })0 d: U( `; y; p/ s
  23. 3 Y- }7 y$ b' w. U, m) t( U
  24. // 4. 创建和挂载根实例。
    - L! o4 T% ]$ r/ O1 w8 R
  25. // 记得要通过 router 配置参数注入路由，6 j6 G4 G/ X4 I+ s4 J' q1 X' [
  26. // 从而让整个应用都有路由功能4 w5 }9 n4 B+ o# L: R" _1 H* j
  27. const app = new Vue({* ?) b# D4 L) B, c1 B
  28.   router4 j3 _2 ]" `* {: I, C3 D- a' {
  29. }).$mount('#app')  O9 R* p6 A1 q6 A

  30. 0 G1 o( g1 `0 [9 z* X
  31. // 现在，应用已经启动了！
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：

5 J: [5 T/ e1 j5 S$ d/ B
你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
  1. # 安装依赖，使用淘宝资源命令 cnpm
    , |2 W  x/ X/ A
  2. cnpm install
    2 T& v0 R& x9 c8 y' ~7 u

  3. * g1 w+ i: H! O2 T% H0 [/ E1 f
  4. # 启动应用，地址为 localhost:8080
    % H! i2 i. f: X+ c& H
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令：
, G7 d6 y) ?( O5 A% S3 k
  1. cnpm run build
复制代码

7 e: q; F( ~/ l2 U7 x( I$ f! a8 @- u  A7 V( K

6 L$ ]: u  A% c
) @- A1 g) z- I" H
# ?- T( H: O. A0 l1 u) c* q5 [0 @' b

% N7 [3 c. l' G
( ^7 p+ z/ [1 P' H' w5 N. n! |7 F1 e$ H

: c( u3 ~' J5 g; ~/ A. h3 O
( x% V; D0 e0 P% H

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