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
复制代码
/ |( j, A1 A, J5 u, U

, E- @8 h6 e' D# q% O! ^NPM
推荐使用淘宝镜像：
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
HTML 代码5 \3 m5 r. o- d6 `0 j
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>- {/ I$ _2 C9 Q8 W) t
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>0 K: c% p+ R) c  ^8 h

  3. 2 }8 `0 O0 y( _) i8 I: ^
  4. <div id="app">
    . t+ S3 ^( u9 M( C& ]2 `
  5.   <h1>Hello App!</h1>
    / q2 P7 r3 P$ |: [% m
  6.   <p>6 f8 e, [" v& }; h
  7.     <!-- 使用 router-link 组件来导航. -->
    7 w0 u$ I9 j4 ~( s
  8.     <!-- 通过传入 `to` 属性指定链接. -->2 B3 ]3 j! M5 d$ C. P* a
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    ( j$ q& T+ F, ~. \5 B- ~/ t
  10.     <router-link to="/foo">Go to Foo</router-link>
    $ ^* k, Q; x8 o) c" X  _" t8 |
  11.     <router-link to="/bar">Go to Bar</router-link>, Y4 i4 X: e6 t( p. G
  12.   </p>
    7 d) e; t4 h, g: M
  13.   <!-- 路由出口 -->
    % _- ]- J# O- P4 [  Z6 u! h2 `5 `/ S
  14.   <!-- 路由匹配到的组件将渲染在这里 -->) [6 f. d0 b) R6 o, G( p  Q1 F
  15.   <router-view></router-view>
      A7 D; F6 p6 G0 M; p; Q
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)' _% }+ B# e; v# Q( y
  2. & j- ?7 _- }! U# V: @: D( @
  3. // 1. 定义（路由）组件。
    * e- W$ Q8 A. @# [
  4. // 可以从其他文件 import 进来
    3 w. T* \0 ]: _  A% O
  5. const Foo = { template: '<div>foo</div>' }
    ( ^! e- |, c: ]6 M
  6. const Bar = { template: '<div>bar</div>' }, a( [, Z& G* r1 T1 y- r+ E: Z. N3 n
  7. 0 t' _4 b" k. S+ H
  8. // 2. 定义路由
    . s8 \& B& R; k, Q4 E. r- M
  9. // 每个路由应该映射一个组件。 其中"component" 可以是
    3 V4 e8 G9 F! R3 A' G2 G
  10. // 通过 Vue.extend() 创建的组件构造器，
    # V! j0 C* i6 c3 W8 l; |
  11. // 或者，只是一个组件配置对象。
    3 k+ ]( J) |7 B, {! O1 l
  12. // 我们晚点再讨论嵌套路由。
    7 s0 j% \  M. ]4 k) k, n+ \
  13. const routes = [
    " _  m0 i% r- D9 [! L- `
  14.   { path: '/foo', component: Foo },% t- M: C8 `' B: O' f! n
  15.   { path: '/bar', component: Bar }6 A; ^$ r( Q9 K5 A: p' j$ i, O
  16. ]
    4 \% z8 O( y8 ?5 n3 U+ x
  17. 1 r' R& |; M7 M  r- L4 R+ ]7 G
  18. // 3. 创建 router 实例，然后传 `routes` 配置9 I* G" h4 Z  B8 m
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。! B, [+ n  O. _) ?0 d% `3 c" h; m
  20. const router = new VueRouter({+ j8 \& z5 _, x/ p4 Y; ~- M6 J+ V
  21.   routes // （缩写）相当于 routes: routes
    % u7 }' w" `9 K
  22. })! p  a  a1 U) U
  23. 7 I8 C1 {0 X6 A: ?; S& o
  24. // 4. 创建和挂载根实例。' A4 x* W  M) p! T( h( ]
  25. // 记得要通过 router 配置参数注入路由，; }/ @/ ]- z" a, P  g9 g; x7 g4 E
  26. // 从而让整个应用都有路由功能- U% Y! N9 j* V& n& F/ r+ X/ o
  27. const app = new Vue({# T) n0 U9 k( A% r! y7 J2 a
  28.   router2 g. A  Y# a" C3 v9 X- O
  29. }).$mount('#app')
    ( L) Q; t+ q, n. {
  30.   i/ l# L1 E/ M7 D- P
  31. // 现在，应用已经启动了！
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：

6 p& `5 k/ {5 W2 Z& t, C
你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
  1. # 安装依赖，使用淘宝资源命令 cnpm7 i3 i: e- x4 B- o, M( C
  2. cnpm install4 H7 J8 E$ q# K

  3. 5 q" d  O8 n! ?! b2 q
  4. # 启动应用，地址为 localhost:8080
    ( \8 q" `  ]6 i" i
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令：! K9 J7 @% G6 p2 [  ^4 r
  1. cnpm run build
复制代码

0 c* c' V: t. x7 |( j; v& p
2 \0 R. M% V2 k9 k
' c7 p: ?# H! h
, f+ j+ L5 w0 F; f: }+ f; u) S  Z- z0 R) u. r- Z  O& B, [) \8 F

$ @6 i" _) u8 o' i6 h' A" H2 \7 {# C* m+ n8 x: v9 @

/ `6 ~1 q1 G7 `) L9 @4 w8 K* [* q0 _0 }' U+ s
0 e# P9 f8 E' a3 S
7 v2 j8 M5 R' M! S, {% K2 I

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