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
复制代码

: z# p% M5 L4 i- f5 d+ ]
5 d7 n' _! L) K/ h" t$ U4 J0 vNPM
推荐使用淘宝镜像：
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
HTML 代码
; i3 T' V5 d9 @3 O- S! `) s
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>0 D; {/ q) X& \" x  ~3 j
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    4 T3 y+ m7 L8 y8 s9 M1 I

  3. . T0 E! ^9 Y) G7 c* S$ P% Z* l
  4. <div id="app">
    / [0 T7 O) p! R* d: ~
  5.   <h1>Hello App!</h1>
    : L. h5 t: e( ?9 I1 O
  6.   <p>- U$ o2 X/ _/ p$ V3 `
  7.     <!-- 使用 router-link 组件来导航. -->! R0 y% h1 I: y8 }/ G
  8.     <!-- 通过传入 `to` 属性指定链接. -->  I, Z2 w; l& i/ m
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->! Y) @* x0 v" d) s  R
  10.     <router-link to="/foo">Go to Foo</router-link>5 O9 a; G  K! F& I% V
  11.     <router-link to="/bar">Go to Bar</router-link>. A4 U7 \( u, c$ e9 ^; ?
  12.   </p>2 {3 x1 G0 y: I* y
  13.   <!-- 路由出口 -->
    2 ^' a( n; o  S- q3 Y6 A7 }9 o, t
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    2 G$ _2 Q1 r( \; K  `
  15.   <router-view></router-view>
    * ^, b! J) Q) ^
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
      K  v# I2 X6 v' g

  2. ; Q/ y( N- X+ u
  3. // 1. 定义（路由）组件。/ e) o5 M8 A  I9 O
  4. // 可以从其他文件 import 进来3 Y# X  U4 ~2 m
  5. const Foo = { template: '<div>foo</div>' }. s$ G, S9 p* W/ L
  6. const Bar = { template: '<div>bar</div>' }. c% @; o. v6 H+ @( I
  7. 9 m0 A! F: {; i4 `$ W" n/ T
  8. // 2. 定义路由
    ' H; X" b3 S; w- X, h9 c' L
  9. // 每个路由应该映射一个组件。 其中"component" 可以是
    : w6 s& u+ s3 _' u1 v
  10. // 通过 Vue.extend() 创建的组件构造器，/ I% g& d! k/ L+ }
  11. // 或者，只是一个组件配置对象。; o$ _/ c) \* z4 W2 O, e% F7 @: m4 v
  12. // 我们晚点再讨论嵌套路由。. g3 ~  a& B; a1 l
  13. const routes = [0 N4 n4 R0 J- {7 P' V$ j
  14.   { path: '/foo', component: Foo },7 e  u3 k7 v5 H3 P4 I; I. @( u
  15.   { path: '/bar', component: Bar }+ J) q% R# u2 M" K3 A
  16. ]
    & Z4 O5 {7 i! R1 W, {

  17. / r2 h7 V6 E% K" G" ?6 G
  18. // 3. 创建 router 实例，然后传 `routes` 配置
    ! H8 W8 I" B) O. x: e
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。" s8 x' l) b3 C' \
  20. const router = new VueRouter({
    7 P! _( n' o% |8 c7 J
  21.   routes // （缩写）相当于 routes: routes
    " z: Y7 _3 o# c/ K* T5 P# y5 T6 q3 m
  22. })" v- p/ d. q1 l- v% n7 w
  23. * O: Y% J/ t, m+ ?$ o" s: x
  24. // 4. 创建和挂载根实例。
    0 }1 a9 ~$ f/ L- f/ r9 H
  25. // 记得要通过 router 配置参数注入路由，
    9 Q2 J4 Y! \! u  X  R2 I, s. N
  26. // 从而让整个应用都有路由功能
    , H6 d3 Y# ]% V0 o& {
  27. const app = new Vue({
    4 l- t8 y: K7 o
  28.   router
    * O4 [8 }1 [' b9 q+ R; [
  29. }).$mount('#app')
    ! L. H& W8 x( ^/ p7 `% v9 k) B
  30. 1 A# d& v! Y4 _
  31. // 现在，应用已经启动了！
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：

$ u) i' x% e4 F2 }
你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
  1. # 安装依赖，使用淘宝资源命令 cnpm8 Y9 A. q( m' t6 g4 o
  2. cnpm install4 Z! O' z2 P3 U# u' r" f2 z( u
  3. : [( {, [' K: D
  4. # 启动应用，地址为 localhost:80804 M, }$ @3 ~) ^/ U. I
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令：
/ r, Z- b; Y. Z4 e9 `4 h/ r4 [- F
  1. cnpm run build
复制代码
/ d0 _8 d) M0 l

/ |& u4 B; H8 g6 [: f5 p9 t
) U: @8 q; y" M  V; q) k/ d# j% A3 P. S- \" i) H, T: B

- c7 s+ m. j5 K$ q. m+ |. o% J
- ?6 k3 {$ Q1 O6 S+ [, C" a& q9 h" u, p& Y; B
' v. d) ?' h0 Q

1 i" K! q+ R/ [9 |( h# q2 n3 E
3 R7 z8 f. z0 o3 V& f7 K( B0 H- e) ]: j* D4 {3 I4 ~) k6 B

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