您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 15624|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 路由

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:44:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本章节我们将为大家介绍 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
复制代码

! ^3 o. }7 |# A0 m
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
+ s- c2 w: V1 I1 a. d: k' x; |, f
NPM
推荐使用淘宝镜像:
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:
HTML 代码
: r# p, V. F* |
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>9 R# H# \$ h( [; B
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>5 _" a* J# x) I- w4 ~

  3. 9 h  j; E3 g0 c* {: ?2 z) [# l, d
  4. <div id="app">
    * J* c3 O3 o- \- T' X5 `
  5.   <h1>Hello App!</h1>3 J/ ], _- L/ L
  6.   <p>" E0 Q  v; ?. H  [
  7.     <!-- 使用 router-link 组件来导航. -->% B6 _6 L3 {# D) L
  8.     <!-- 通过传入 `to` 属性指定链接. -->
    ( F$ f+ R8 F! D% A9 Y& K
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    % E5 E5 f( G' X% y! t9 G
  10.     <router-link to="/foo">Go to Foo</router-link>
    + T* a. H- l$ A/ P
  11.     <router-link to="/bar">Go to Bar</router-link>4 P" z2 J% g% ]+ K5 v/ ^
  12.   </p>% r/ l+ [2 }6 w" s7 N  H
  13.   <!-- 路由出口 -->; [" `5 |9 V' h/ q# _
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    , B$ t1 X' r# B! ?  z; Y
  15.   <router-view></router-view>$ e. r1 m7 w! L6 I. H1 _7 X6 q6 Q' X2 |
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
    8 p% f& }" W- R2 a! _
  2. 0 A( m0 C" f4 _) q% w' y: K3 V
  3. // 1. 定义(路由)组件。2 X( z5 s1 B' B& e; O5 w# e( T! ~
  4. // 可以从其他文件 import 进来4 _$ x2 ?" s3 {) ?
  5. const Foo = { template: '<div>foo</div>' }) |! o8 h" y" \  X+ [1 ^2 `
  6. const Bar = { template: '<div>bar</div>' }
    ) j8 L( `, o7 ^

  7. 2 }5 U8 @; n9 Y2 H, m4 P
  8. // 2. 定义路由* s+ }# g- s1 ~+ L( i
  9. // 每个路由应该映射一个组件。 其中"component" 可以是! F8 W; u: P% V5 X, n
  10. // 通过 Vue.extend() 创建的组件构造器,. R: o+ F7 u8 @  B- I- U  u) _
  11. // 或者,只是一个组件配置对象。
    4 z" k# v) ^) j2 H2 v( T( H
  12. // 我们晚点再讨论嵌套路由。
    6 y+ `% ?! b% A2 h, R) t* [
  13. const routes = [) X8 C2 z! j# V  v
  14.   { path: '/foo', component: Foo },
    % X% D6 I$ |1 S2 V) [7 d% N
  15.   { path: '/bar', component: Bar }
    # s/ M. d5 {% u& Y, e
  16. ]
    & J8 Z9 Y- [5 q4 p) w6 s" x# u
  17. ) N( Q' e( a7 U; k0 ^
  18. // 3. 创建 router 实例,然后传 `routes` 配置- R9 B8 h/ H1 b
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。
    6 j2 u* j( X; b# I' D, s2 m; W1 }
  20. const router = new VueRouter({3 c: @& t) i9 b
  21.   routes // (缩写)相当于 routes: routes
    0 P4 [& a( X+ r$ L
  22. })
    6 m- m$ ]' F. m  w

  23. + a' N/ g1 a, k
  24. // 4. 创建和挂载根实例。
    ; R) v. u. m7 u2 T7 s, I$ A* D$ L
  25. // 记得要通过 router 配置参数注入路由,7 v3 b0 M' d! V. I4 h/ d
  26. // 从而让整个应用都有路由功能
    $ W9 Y. o1 C$ ?8 T
  27. const app = new Vue({5 T+ J6 l' e. j
  28.   router, @& t0 g4 j+ l3 j0 q: D) S5 F
  29. }).$mount('#app')5 o9 s+ [! h& n: R2 \7 _

  30. . d: C$ S! T- g8 E9 _
  31. // 现在,应用已经启动了!
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码:
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0

% I" y% m) C) @3 n8 }' S
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令:
  1. # 安装依赖,使用淘宝资源命令 cnpm" a2 e+ ]- Y0 s
  2. cnpm install4 t; E  j% g, y3 A+ r; f( }1 P

  3. / v$ {. m/ B9 e5 A5 R; v
  4. # 启动应用,地址为 localhost:8080
    ' A. j/ T# p- O9 I) |$ U  l
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令:
6 d5 B6 g5 n$ A+ }3 P% }
  1. cnpm run build
复制代码

4 P* A4 \/ R2 p8 V$ E2 a8 I- E  s1 s  f4 o( N; M! }' h
. @( f, `+ F2 ?7 `8 B4 @# Q

; P% r9 H  N% I
5 q$ \- X+ E; z! Q
! N( j1 m+ C0 a4 Z! _& _$ ^9 o4 \  V2 x$ Z; R+ @4 a0 i+ w& y
+ N; g, H+ X* b9 y0 G3 B

- h# i8 [! x" o6 X# x6 }+ w
$ U: ]* g3 N* k$ S0 U% b+ N$ r% N* b
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 18:44 , Processed in 0.067261 second(s), 23 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!