本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
; ~/ D b/ Y- ~+ M% p游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 ' b4 A$ U3 \" \
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
7 L) i0 k5 }3 i* _/ ?- <script src="https://unpkg.com/vue/dist/vue.js"></script>' C( J% e. d! t7 I6 k$ e
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
4 @. v2 C% s. n! D+ c - # x4 w/ Z. }- J6 h
- <div id="app">' S* ~8 `& L. s& F$ q8 M. s4 n* @
- <h1>Hello App!</h1>+ y! l+ F8 C" o! M0 e
- <p>
: }2 {% n/ C g# s( l8 d1 H - <!-- 使用 router-link 组件来导航. -->
; [2 B& E9 g4 U - <!-- 通过传入 `to` 属性指定链接. -->$ _3 u/ w! G5 b7 O- a
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
4 u8 j% D5 w' M0 w- H* {0 R - <router-link to="/foo">Go to Foo</router-link>8 g: J8 U3 U8 ^/ @& `3 ^: I5 x
- <router-link to="/bar">Go to Bar</router-link> ]! y |6 r6 l. n1 s
- </p>
, O, H2 m2 z* Q* [) L! ] - <!-- 路由出口 -->/ c: @+ N2 C; x5 v1 G( K0 H% W \3 ]
- <!-- 路由匹配到的组件将渲染在这里 -->
+ O j. G& E6 W, V - <router-view></router-view>
~& q7 _+ O" l7 e4 L - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
; |3 ~, s/ ]' R- M: j0 U" W - 4 r3 D L2 u- a L2 | ~5 N) o
- // 1. 定义(路由)组件。# m0 M/ y* Y: Z# ~
- // 可以从其他文件 import 进来
; B5 T! i& q/ W9 Q# m5 v4 I% Z - const Foo = { template: '<div>foo</div>' }
, [2 v _. R' R5 Q) D: `- g$ A - const Bar = { template: '<div>bar</div>' }1 i6 s# v, d; U$ u6 q
-
" E$ ?4 d5 ?! ^0 i - // 2. 定义路由 M$ t2 C+ ~" m* R* d
- // 每个路由应该映射一个组件。 其中"component" 可以是$ m7 t p8 b' S* y- ?' s# W
- // 通过 Vue.extend() 创建的组件构造器,7 D. r2 t3 V9 w | O
- // 或者,只是一个组件配置对象。
g/ T1 v( |2 N5 {* t - // 我们晚点再讨论嵌套路由。
' _7 n' y* N& Y4 U: ?; H% Z6 j - const routes = [4 J: P8 S( V! }
- { path: '/foo', component: Foo },2 a1 D$ r/ t3 ?
- { path: '/bar', component: Bar }
) p# a" R3 }2 [) p - ] z8 C( n; K5 K; I
- ! l0 |2 |4 g$ E
- // 3. 创建 router 实例,然后传 `routes` 配置' P; w# k2 m% J! i& g+ @4 y, q
- // 你还可以传别的配置参数, 不过先这么简单着吧。7 G$ ]. o7 c/ e) E9 G6 w% m
- const router = new VueRouter({
$ [2 F* ~2 ~0 V, [& Q. v- H - routes // (缩写)相当于 routes: routes
& I! g7 [; \$ E) d0 s9 P - })1 X: Q& h) @. x6 F# b0 {! I
-
4 ]) p! M" ?- A* y0 W/ t - // 4. 创建和挂载根实例。
2 e" B- ] N8 T, ]& \6 F+ w - // 记得要通过 router 配置参数注入路由,& a2 p5 ?, ]7 \. p
- // 从而让整个应用都有路由功能
1 j' G' s6 b% U4 N# m# v, I; Z% b - const app = new Vue({+ j4 l* X- }& t* q) l
- router
9 t" u( j$ g; h0 v - }).$mount('#app')0 `1 _$ O- e3 y$ h+ p5 z# b
-
. M N& v+ ~$ p7 E" Q0 b+ Q - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
- J' K. v; f0 x: m5 f! w; y下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
. c& X; }# ]8 Q- r; q4 S; L - cnpm install
0 Z! K6 F/ }0 b3 z - 6 G- B7 A7 R% m% r5 ?4 a" u* }
- # 启动应用,地址为 localhost:8080
$ l# q! T3 B* f" z% L - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
7 f0 R ? H0 q
) m) E( m; W' J- l/ F5 i& F! G# K
/ w8 w7 w3 T$ j0 u$ e9 N- w _: s" z: n- f6 |' h5 X% A& ?9 k
! Q$ H* E0 e! N+ a: E9 b: E
/ O! ^0 u$ Y9 j- J% ?) S( ]4 s4 q; |) h( h$ C/ c6 C$ f2 C3 T
/ N8 S: v: t9 {& L' V) z4 e6 O7 T; Z# l @$ t
" H {' E8 \( m
' z9 o# W: F8 b9 ]* i+ H3 A. i: q6 N! O0 K* g
|