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
复制代码
# q- G1 z; A, q' S0 |0 L0 J0 G
9 J$ s8 t3 l7 K: M
NPM
推荐使用淘宝镜像：
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
HTML 代码
+ {2 Q6 l3 k4 Q$ m
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
    , A* S) _6 w/ S3 g/ X- |- R
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>, Z5 C  W$ d6 i- {, |- b
  3. 8 {) k' @& {) C+ ]+ b
  4. <div id="app">
    1 z, Z- c: ~- f9 D
  5.   <h1>Hello App!</h1>* h( p' X* s) H3 g+ [! @
  6.   <p>
    5 D  u2 {, d3 X( j3 x8 d4 \
  7.     <!-- 使用 router-link 组件来导航. -->
    1 W4 |" W/ {0 L5 @+ N
  8.     <!-- 通过传入 `to` 属性指定链接. -->/ @/ l0 K% u+ \2 g, \
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    " J1 {$ e+ ^( _2 L9 c. M9 `
  10.     <router-link to="/foo">Go to Foo</router-link>% j  l  Z' N) d9 F' P
  11.     <router-link to="/bar">Go to Bar</router-link>4 M  _' n7 i1 l7 R! @9 ~
  12.   </p>
    $ S3 K5 m+ A  u. P
  13.   <!-- 路由出口 -->
      U. X; I6 u8 q3 c  a
  14.   <!-- 路由匹配到的组件将渲染在这里 -->* ?  z% n( {4 v2 t1 @: u; o" K
  15.   <router-view></router-view>2 o% n) \2 p8 P$ L" V6 A
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter). _) O  }9 n5 n( g  [& f# I; T

  2. # x  B+ S' H7 C5 S2 L: `
  3. // 1. 定义（路由）组件。" X) W& F: ~2 |% H) F1 j: _1 k- [% P
  4. // 可以从其他文件 import 进来" c+ n' b) t- S% H
  5. const Foo = { template: '<div>foo</div>' }$ @: v* r$ J: P4 ?6 F
  6. const Bar = { template: '<div>bar</div>' }+ D  M* c, B3 _1 q8 `' ]" H
  7. 2 e% L9 ^$ u; t' {# c5 K" [" ?
  8. // 2. 定义路由! ]# Q7 ?$ [7 Y" q9 F- c: ~
  9. // 每个路由应该映射一个组件。 其中"component" 可以是- i$ \+ m6 V( D
  10. // 通过 Vue.extend() 创建的组件构造器，. h5 ?" C- J8 r5 A+ I
  11. // 或者，只是一个组件配置对象。3 K& L. N+ z' H  g5 Z: U: F& A
  12. // 我们晚点再讨论嵌套路由。# L) c- m! W% V+ ~1 h+ y( B
  13. const routes = [
    3 _) @* K. _) q4 |4 G
  14.   { path: '/foo', component: Foo },. y) L% f% n; y
  15.   { path: '/bar', component: Bar }
    $ w, X& ~  W5 ~0 q- T& ^2 T% t
  16. ]6 ]9 h3 _$ i, q8 Q4 F6 l2 ?$ X
  17. 9 Q& v2 D2 O$ o5 e; v# V
  18. // 3. 创建 router 实例，然后传 `routes` 配置
    ' B2 M. b6 N& }' a/ o' e
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。
    & E) g, H) Z4 i
  20. const router = new VueRouter({
    9 D# f& y" N# i- A0 j
  21.   routes // （缩写）相当于 routes: routes
      v5 O+ a; v: I$ J4 `7 w3 w
  22. })+ Y+ q% H! G; Z/ S
  23. - c% J% t- O- A& s" w% @
  24. // 4. 创建和挂载根实例。4 g2 ^8 z+ ?/ d: D
  25. // 记得要通过 router 配置参数注入路由，
    + S! Y6 `# d7 t' F# n, F. D6 ~
  26. // 从而让整个应用都有路由功能& Q' C- Z; E& a' f0 n* K; e
  27. const app = new Vue({  ^1 _, P+ y# }& V6 P
  28.   router
    7 R% E6 M9 c, Z) ?1 [: ~2 k$ d
  29. }).$mount('#app')& M  `; \' A5 I% n2 l* J5 _! s6 m
  30. ; u! _; \' |' ^8 x7 Q* q
  31. // 现在，应用已经启动了！
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：
7 T: M8 k" V3 {4 P$ e) j9 e
你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
  1. # 安装依赖，使用淘宝资源命令 cnpm
    7 s6 {& ]* D, X$ N
  2. cnpm install
    ' j: Y8 I/ C; [$ x2 `! M
  3. 0 a, f6 b. K2 Y4 E* B) P
  4. # 启动应用，地址为 localhost:8080' S7 X5 q- `$ Z5 I
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令：
3 Y! L; _0 u! w- z1 y. G
  1. cnpm run build
复制代码
3 `1 m5 s- L# h/ G1 U# R

! C# P+ S6 s. C8 s9 {' ?! N6 ^+ U8 S6 M3 A3 z) f; s' ]

5 n+ _- u; N5 @& X7 g! i) U  S: O

. Q/ z9 }& R% k
" [  Z' E& ]: f0 i
3 @8 t/ x3 Q0 o' @9 }  \. I4 E" s/ O" N7 {$ f! y) Q+ a

, o& Q' ~0 W" m, _" P! f
; r# \% W  Y: S" V8 S% M

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://www.cncml.com/) Powered by Discuz! X3.2