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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 17163|回复: 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
复制代码
2 j  }# Q* c  m: V6 x* q% n
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0

7 P/ x  M$ }" E. K) s# \; u$ kNPM
推荐使用淘宝镜像:
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:
HTML 代码
, z- s. l. N, A+ b6 }8 u
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
    ( F. l! A' k% ~
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>0 ]- D: D) {' p4 d. `; l  m6 B
  3. 8 ^3 J! ?3 P7 o! Y$ v7 I" s
  4. <div id="app">$ J1 l. I& o$ N/ m2 R
  5.   <h1>Hello App!</h1>
    ' ?& d! P* Y- c2 O' F/ a( w) z3 m
  6.   <p>
    + a" d  R+ `! m2 g) p
  7.     <!-- 使用 router-link 组件来导航. -->9 T) o: @: c* a: K: b* z
  8.     <!-- 通过传入 `to` 属性指定链接. -->
    3 J2 B5 P( M- H/ o# y0 c
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->/ c/ Y* W  O! X  q9 Y2 }% G
  10.     <router-link to="/foo">Go to Foo</router-link>
    " A' {$ s& @$ q! R8 r
  11.     <router-link to="/bar">Go to Bar</router-link>9 s6 H) h4 p5 i! M6 M
  12.   </p>
    $ I2 c$ U+ g* F3 G, w3 A6 [- E. G
  13.   <!-- 路由出口 -->, x* }% O# k  K0 Y8 ~
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    5 e7 ?. t! J: f+ A4 z! v
  15.   <router-view></router-view>
    ' z5 I+ m9 U5 c0 d: F1 k9 [+ f3 Y
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)* a) M( b! p$ \: e. C4 c) E

  2. % N: b, Q" J; I( y$ C+ l- U
  3. // 1. 定义(路由)组件。
    - ]+ ~4 B3 y$ v
  4. // 可以从其他文件 import 进来2 E+ W5 K+ H+ D$ Y, u
  5. const Foo = { template: '<div>foo</div>' }6 H/ V2 X5 q( G1 \; Q" r
  6. const Bar = { template: '<div>bar</div>' }7 R1 Z4 O4 j; n7 E( R7 N* Q; c
  7. 1 r9 P  G- p' P2 J" |, X
  8. // 2. 定义路由
    2 `* L. A" S7 j; X; k# y6 @  \
  9. // 每个路由应该映射一个组件。 其中"component" 可以是
    ( W0 u" a; X0 `# Z8 a  d8 q/ r: D
  10. // 通过 Vue.extend() 创建的组件构造器,
    ; ]7 J5 L# z: \3 E- s: n- }3 @
  11. // 或者,只是一个组件配置对象。# V. z0 V6 W. x, @
  12. // 我们晚点再讨论嵌套路由。7 ?( [* G2 C* d# {6 ^
  13. const routes = [" K6 t$ @/ Y8 h/ ~/ a
  14.   { path: '/foo', component: Foo },- t+ ^( p* c/ Z3 I  X  ^% ^; }
  15.   { path: '/bar', component: Bar }
    ' J; g! r1 B5 W  u( S! r# W. }
  16. ]+ Z* O. N7 W( D: P
  17. , G) n/ V" o& F
  18. // 3. 创建 router 实例,然后传 `routes` 配置
    5 V- s  r$ f) i+ N2 E/ ~5 a2 a
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。
    0 ?1 z5 I8 A" C* l/ @) p$ }$ H" G
  20. const router = new VueRouter({
    ( L+ q: t* X# f1 p: A& Y( R1 P
  21.   routes // (缩写)相当于 routes: routes5 o: o; i; h1 g; o- \
  22. })
    7 b1 f8 ~% d# t

  23. 5 ], ]  q! H- y9 O4 h2 Q
  24. // 4. 创建和挂载根实例。$ Z8 l: e& o3 `/ n, Y3 Q" n
  25. // 记得要通过 router 配置参数注入路由,
    / g/ {1 t- E+ P3 e. I! |5 [& T
  26. // 从而让整个应用都有路由功能3 T5 g/ ~2 k8 p% I6 B
  27. const app = new Vue({
    5 h7 {3 ^9 I% B3 n: m) ^3 C
  28.   router+ n/ {# j- B5 P
  29. }).$mount('#app')
    & T- ^* J$ x) c; K+ D  v

  30. " o2 L* F9 a" [8 V, \! I) Q) H
  31. // 现在,应用已经启动了!
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码:
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
8 f5 d$ {$ d6 k
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令:
  1. # 安装依赖,使用淘宝资源命令 cnpm
    ( Q* t4 m5 \$ e! p
  2. cnpm install. J% N" {9 Y: a/ h  D9 ]' G! g

  3. 3 N, N; q/ }3 z5 |" J" I
  4. # 启动应用,地址为 localhost:8080
    1 M! F- ~8 f6 W: [; m
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令:9 j( |$ L' A! e3 q$ {! A
  1. cnpm run build
复制代码
; [& R9 l' T$ ~& g3 J0 x& o# G
! F% d0 |+ H3 a" `# ^6 J

% Z# z5 E" w& ^  A4 T6 I$ E  S
! A3 i+ v) i8 x" m+ B
% y+ [& z; t* m1 f" @3 }& M6 }1 Z0 u  \

. s0 ?/ ]- }% @% c) K: v
# d6 y! {: i, B  ?' l! b1 ?! x2 h  |1 U2 o

, l. S3 M0 |, v9 ^- J/ D6 u( L& O. Y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-21 05:21 , Processed in 0.054939 second(s), 23 queries .

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