本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
4 }2 r. p% K0 {* I% p2 M游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
b6 Y% u& Z- p4 NNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
5 L4 S& M" a) p; Q- <script src="https://unpkg.com/vue/dist/vue.js"></script>" H" I% x7 P( ~8 o1 R2 D' |
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>+ {" U1 _* B' [0 K* b$ n
- ) F' N: q: D% f) E
- <div id="app">. L T9 K/ n% _% K" |: X" x
- <h1>Hello App!</h1>
# q, f1 w: g* Y- Y- S) R - <p>
$ f% j" t2 V g8 z) ] - <!-- 使用 router-link 组件来导航. -->" o3 K1 ?- x) r6 V9 q
- <!-- 通过传入 `to` 属性指定链接. -->
0 i+ |! j' a* G9 i - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->. S. G+ y0 b$ [; W9 O& m4 X. g" J1 [
- <router-link to="/foo">Go to Foo</router-link>" T: m7 Z9 O6 u+ v
- <router-link to="/bar">Go to Bar</router-link>
8 T& N. i8 f8 R K$ K& i' C5 e* ` - </p>
0 y# ?- O) D% I1 h8 R& n Z - <!-- 路由出口 -->- m. x! J/ Z0 t0 j I; }" e: D
- <!-- 路由匹配到的组件将渲染在这里 -->
l4 A# o( ?; ]. e - <router-view></router-view>
& B r d2 [$ @% u5 C - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
! g' X0 T7 c) i; w3 R( ~7 G# F - : R7 V- a( T, E$ q6 P+ V) g% z
- // 1. 定义(路由)组件。
( \2 W' j6 O. s" M. p - // 可以从其他文件 import 进来# i0 F4 g; @2 x5 _" [2 E6 }. @' u
- const Foo = { template: '<div>foo</div>' }! D* y" k8 ?/ \. Y% D3 b
- const Bar = { template: '<div>bar</div>' }
, j0 t! j" u& Z# Z( r4 a5 P - . V* b) k) O) F/ w3 C
- // 2. 定义路由
; H: I# ~( u0 |3 L( d0 P - // 每个路由应该映射一个组件。 其中"component" 可以是
2 e% w$ {5 G) q( U( v - // 通过 Vue.extend() 创建的组件构造器,) C. l5 f6 ~3 m7 w) T" i. j3 U
- // 或者,只是一个组件配置对象。
1 |! Z0 s' U) x& o% { - // 我们晚点再讨论嵌套路由。+ V& R/ G, Q9 l% G
- const routes = [5 N! X# O- {+ v2 ]
- { path: '/foo', component: Foo },0 ^6 {7 O# |5 R2 I% U4 }
- { path: '/bar', component: Bar }- l/ ^$ c7 N; M. R# n
- ]
1 B9 u r, C4 K% a( T - ( ~0 |3 i( [$ b* @2 A- \5 H
- // 3. 创建 router 实例,然后传 `routes` 配置8 K* `- u4 E5 R- H
- // 你还可以传别的配置参数, 不过先这么简单着吧。
5 h+ u: z; H5 i* _, C9 B( s0 k - const router = new VueRouter({6 y+ j* m8 T$ z' ?+ s
- routes // (缩写)相当于 routes: routes+ _ y) k* M1 p, a
- })
6 P* A9 m# B& E -
9 J2 G+ u6 O ]# D7 u - // 4. 创建和挂载根实例。
% x5 x- s3 ~ d. y2 I - // 记得要通过 router 配置参数注入路由,0 q5 L( t0 i8 g% d- {! v/ {
- // 从而让整个应用都有路由功能8 ~1 Z5 r/ R" v$ W5 f2 ]
- const app = new Vue({4 C0 e% [) ^, l/ }
- router
% r4 Z8 S8 _8 T, ~ - }).$mount('#app')
9 ?; \' l! z' {' X -
- T7 ?1 G! m9 ^8 I - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 ! N! R2 R2 B5 b q' I8 {+ n
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
( Y' L4 }" V+ m- D: X8 F( Z! L - cnpm install0 E! _( ~: L( |) Z7 a0 G; z4 P
f! j" |% f5 `/ j+ i& p- # 启动应用,地址为 localhost:8080
- I7 {2 h9 `8 Y) L! Q9 e5 I - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
% E4 X: L7 v; i$ n
9 k7 c1 z: a- N! z2 o& Q2 s& ]& K: {; [* D# v' e6 d
0 @$ T( o! ?" J3 E2 @3 Q
* |$ W) D$ {; ]5 D. G
& ]! m/ b6 t% B, d8 A A
?6 T T+ _# X G; C; H9 i( ~1 w
! e2 ?/ I( V, ?1 g7 _6 _4 d
. r/ _* _6 }# l6 O6 U
! k/ J6 C0 Y/ a' Q* B8 d. p3 q/ {: c: X
: [# }' F* ~8 E: `# v, e3 I |