本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码 , h" L, N- ?# `" U# n, w7 C
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 8 @" j& W, |0 l2 d
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
( u% E% h+ A5 z7 k" ?3 t9 S- <script src="https://unpkg.com/vue/dist/vue.js"></script>) f- a/ S0 c3 l) s
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>4 c& r) k4 c) G# K& F: N
- ( z3 l: E& W0 ~! h$ e3 o
- <div id="app">' Y; k$ L2 q8 n1 |
- <h1>Hello App!</h1>
7 C/ w: r# ?4 S5 V" M - <p>
2 a B* J/ j% i' ]9 `- h. n) }4 s- ]+ g - <!-- 使用 router-link 组件来导航. -->
) n) s, P- _2 W# V8 G5 T9 V9 D - <!-- 通过传入 `to` 属性指定链接. -->
- b) F1 d' A9 N" F; t! f - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->- }' O- z; H$ h0 ^+ O' d
- <router-link to="/foo">Go to Foo</router-link>( A: g0 A& r5 ]$ l) Y
- <router-link to="/bar">Go to Bar</router-link>
$ q" o( O' S) V' `4 B& o/ R9 W - </p>
; t4 @' E& e7 l P1 T) M G9 p - <!-- 路由出口 -->
9 d) Z- R8 v2 R0 P/ u - <!-- 路由匹配到的组件将渲染在这里 -->
- M( _9 J. C/ B/ o# ^1 C - <router-view></router-view>7 K [0 i: {: ]) ], C+ I
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)! N ^' \. c" D, @: a, e
-
; @+ X8 n1 b2 a7 {1 i - // 1. 定义(路由)组件。
. ]5 Y% \5 T$ v; C, E - // 可以从其他文件 import 进来9 ^; O. i6 Y' c9 b
- const Foo = { template: '<div>foo</div>' }
1 u5 C; m& B: |0 j - const Bar = { template: '<div>bar</div>' }& v K' a- {/ F$ Y; F) \
- % ~# s! T6 ?% u7 R e" s+ q: z
- // 2. 定义路由" z/ T6 M7 m" t5 W8 H1 m# ^/ s: [
- // 每个路由应该映射一个组件。 其中"component" 可以是
& W6 l( W0 O: A5 f2 Y4 R; C: A6 S - // 通过 Vue.extend() 创建的组件构造器,# F& @1 @) K J' o% A8 u* h
- // 或者,只是一个组件配置对象。$ L5 J( |. A6 n# `8 O
- // 我们晚点再讨论嵌套路由。& }6 i5 M: V+ |9 X; v1 L/ R: R
- const routes = [; r( T6 s5 M7 S3 T% R J& {
- { path: '/foo', component: Foo },; W2 w, `) }' F
- { path: '/bar', component: Bar }9 g8 Z- M2 ~ j1 u' j" s
- ]
y0 \( i; [8 x4 I% r -
6 d9 `& u2 q: H6 T6 o - // 3. 创建 router 实例,然后传 `routes` 配置+ ^, j4 V8 {* R+ L, [' N( m
- // 你还可以传别的配置参数, 不过先这么简单着吧。
5 h- ?8 ~; o8 e& ? - const router = new VueRouter({, z. c" [! j; N: h. N3 F
- routes // (缩写)相当于 routes: routes( D& L4 ~3 [' x( M1 @
- })
/ i! ]. k4 L* S) _. W - 3 ]* B7 P6 A. b) L* |% T1 O
- // 4. 创建和挂载根实例。
- y: O5 m9 r8 T% e - // 记得要通过 router 配置参数注入路由,
% Q( [; i' B; b( D) D9 ? - // 从而让整个应用都有路由功能$ ^. r& W& a" p2 d/ F H
- const app = new Vue({
2 u% V5 H+ }, c/ f2 N - router: j3 w8 j+ p, C8 ~0 V8 H$ {
- }).$mount('#app')1 D9 G- D; P, P4 k2 m% R+ s
-
5 f5 m3 Q4 ~$ P7 D4 ~ - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
4 G8 k1 W \6 C. s. P( T8 X+ v下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm: y) U% R& y: B0 Z/ f
- cnpm install2 B5 w8 u: r% D# A
7 d1 A. }/ ]% X- # 启动应用,地址为 localhost:8080
; w' r3 o# P; } F) i - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:7 y. K# ~$ ~+ r; \
8 u+ U- A, `/ T- B
/ [1 y; r, O; T- {/ a) B9 j! Q6 Q& z) U
' _ E3 l0 ^+ r8 n! }' o! u
- ]/ C) O2 C4 [' F$ |
1 r) s# t& E! b3 N) x( `5 g1 M: V, }0 [2 N, g9 y+ U
6 q1 U3 G H6 \3 A" B/ B/ w$ f: ?; e1 \; \
. d4 y2 _9 N( c# ~. Q
$ r8 ]9 a4 \. `* j* e4 z' w8 B8 d' g
|