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

5 t* @3 M- w2 z/ {, s3 p1 l$ A* M1 o1 K
NPM
推荐使用淘宝镜像：
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：
HTML 代码
* h9 J% m! u% K. s$ F
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>( c$ c  X( V0 c  L1 E4 m3 O
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>8 K; B$ j5 J  W- {( N+ [8 b! f

  3. ' O' t: u9 J& D6 E9 @8 @4 \
  4. <div id="app">
    " p' V% H, j/ j$ Y
  5.   <h1>Hello App!</h1>; M; i8 |8 O, c" c" f0 r
  6.   <p>
    * ?' n$ C) L5 D3 _) d
  7.     <!-- 使用 router-link 组件来导航. -->
    4 m9 s) \9 `: d
  8.     <!-- 通过传入 `to` 属性指定链接. -->, W6 M# w% \" Q# A& b' Q7 `
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    # o$ }9 q9 R8 F
  10.     <router-link to="/foo">Go to Foo</router-link>$ y8 f; g' w! A5 R  L" k9 e
  11.     <router-link to="/bar">Go to Bar</router-link>
    / K- u0 S) e' `/ |
  12.   </p>
    + C2 G6 E' P0 |" w
  13.   <!-- 路由出口 -->
    5 W/ @+ _$ a$ P% ]1 L
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    # [/ a( `) e2 C* Z7 x
  15.   <router-view></router-view>; ~6 N1 e# l! i/ L
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
      N2 w1 R% G9 ?8 N

  2. ( n1 K& u8 y7 \( i/ d
  3. // 1. 定义（路由）组件。
    + Q6 r7 E& b# m+ o
  4. // 可以从其他文件 import 进来
    ; ^. ?8 p$ g' K/ p" ~: U
  5. const Foo = { template: '<div>foo</div>' }
    0 M# T3 r+ ]$ `' F. r/ N
  6. const Bar = { template: '<div>bar</div>' }- V0 \/ G, A/ a4 T" L- c

  7. : m8 S$ N6 ~4 v' \" I( r
  8. // 2. 定义路由9 W  n+ k1 C+ v% k' U# R
  9. // 每个路由应该映射一个组件。 其中"component" 可以是7 L: B! H. r; S  N% n0 U" i" e: _
  10. // 通过 Vue.extend() 创建的组件构造器，- ?& u! k2 i: M1 K  R
  11. // 或者，只是一个组件配置对象。
    5 k1 _" P+ p8 B$ S/ J: k" X
  12. // 我们晚点再讨论嵌套路由。0 q% X4 a9 ~/ d
  13. const routes = [
    . X& b( d0 M; F1 C5 A. b
  14.   { path: '/foo', component: Foo }," |) i+ v' F/ y8 I
  15.   { path: '/bar', component: Bar }
    $ X5 `0 J' T/ m$ L' B' y  t
  16. ]
    " W; m7 g: v6 z: F8 o
  17. 2 l  \$ q' L$ r. C" I0 @+ Q& ~
  18. // 3. 创建 router 实例，然后传 `routes` 配置
    % C" E/ S6 z* @8 Q& s" a7 l
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。" w( ]7 q5 H# W6 u* V* J
  20. const router = new VueRouter({) d; M! _; g0 A9 v: v. e$ B) o
  21.   routes // （缩写）相当于 routes: routes
    # |0 e7 H3 _/ Y4 R4 w+ [
  22. })
    9 b! k/ m# l9 C0 q1 x8 ]8 f

  23.   U, S; O1 d! A9 e8 O. D, V9 |1 t% z
  24. // 4. 创建和挂载根实例。& q  [" s+ e; B1 F) @6 A" V+ g0 F% {
  25. // 记得要通过 router 配置参数注入路由，, ~9 F# i9 a1 r" ]6 c2 ?  o
  26. // 从而让整个应用都有路由功能: M  z  a9 |& w; h* p
  27. const app = new Vue({
    5 v% X3 Y% X! ]
  28.   router
    1 H: J. y. B: h2 k7 R- _+ d
  29. }).$mount('#app')
    ! s0 h/ N. p& N$ H, o

  30. 4 l! @* o8 g% K
  31. // 现在，应用已经启动了！
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：
( x, n0 v% }+ b# N* A( ]
你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example
下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：
  1. # 安装依赖，使用淘宝资源命令 cnpm
    1 Z) F" {0 E4 A6 n9 C
  2. cnpm install
    : t# S% m, `1 @9 ^) V

  3. + |: S, f! V. N. T& S- S% W
  4. # 启动应用，地址为 localhost:8080
    ( K8 P2 F3 ]2 v! e" d
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令：
$ r3 N) N, D  S  z; b( C
  1. cnpm run build
复制代码

# x! b! T! d$ {) R$ g* K; j# s* [# G) x' p" {2 t6 \' n% ?
& [* ^( Q) k( f; }" [5 j

& U6 x1 p* s9 _* O& t6 X3 {; ^; D& O+ b

  d* l: u8 u) g2 ]5 O
$ z+ F1 J) r  w7 N) l$ J
8 A- T/ w: Q7 l$ M' e
, t- M. L( |  n+ B$ g5 f0 ]
5 o" ~* A" R5 J$ U' N' c4 M1 R% _. q2 U7 v

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