|
本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码 1 I6 \5 a' J, O+ i7 A
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
& a, @" x3 y& S2 P# pNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
: K0 Y5 b. [) C$ k- <script src="https://unpkg.com/vue/dist/vue.js"></script>
$ V* S3 B. P" u- a- ]+ B - <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>) F3 `% e8 A/ Y4 Y' ^4 a/ w
- 5 r$ Q: Y! x0 {+ E. \
- <div id="app">% @! `0 v2 K3 ?7 F
- <h1>Hello App!</h1>; V% O/ |/ a: ~ B6 p
- <p>
% r3 U0 n# t; D5 T3 n - <!-- 使用 router-link 组件来导航. -->
2 K- F4 Z; n5 H5 | T - <!-- 通过传入 `to` 属性指定链接. -->
$ B. k7 V$ L+ }7 Y4 x3 ^: ` - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
2 u- Y: R; {$ \; |6 D2 i - <router-link to="/foo">Go to Foo</router-link>; }3 x; c9 n6 Y4 e
- <router-link to="/bar">Go to Bar</router-link>8 x. h, @& _) t
- </p>$ |0 e( r. M5 O4 F6 t {, e
- <!-- 路由出口 -->( G5 A+ v$ [; w& S3 M5 o
- <!-- 路由匹配到的组件将渲染在这里 -->
7 a2 l2 f! y+ d* b |4 t( } - <router-view></router-view>4 J, {* {/ o- E7 u
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)2 c% B2 V/ b1 f1 K+ z: |& d- f& V# _
- / Q* |' q# h* `. K% v
- // 1. 定义(路由)组件。. n+ o0 b% e1 D) _. P4 H! ?+ r4 g
- // 可以从其他文件 import 进来
' h# k0 h; a) @ e6 @' v - const Foo = { template: '<div>foo</div>' }# P" G- C! H0 e
- const Bar = { template: '<div>bar</div>' }6 G7 T7 l2 `: `! v# t- q' Y
- 1 Y7 ^( W$ t2 K6 T9 h% `3 k
- // 2. 定义路由
- J* x9 w) _9 m. S8 m; J; N! X) H: O9 T - // 每个路由应该映射一个组件。 其中"component" 可以是* N, t! Q& R& G) r! {( x0 e
- // 通过 Vue.extend() 创建的组件构造器,' R6 ?4 Y: I& _2 E* i) N7 e! B$ B7 a. i1 x
- // 或者,只是一个组件配置对象。6 R2 Z) b; M5 l/ ?+ M# t
- // 我们晚点再讨论嵌套路由。5 U8 M5 |0 u6 @5 o4 _. X3 ]0 t* h
- const routes = [
+ ?, r' ]2 H" s3 K1 Z - { path: '/foo', component: Foo },, f6 g; }. a% \+ d7 a
- { path: '/bar', component: Bar }9 v/ u2 P9 b9 d+ D; n4 s
- ]
* q" g1 n K' F1 F3 R - 8 P+ x9 p1 T t! D4 @! w' r3 A. _
- // 3. 创建 router 实例,然后传 `routes` 配置
" s& @! W( m$ O - // 你还可以传别的配置参数, 不过先这么简单着吧。, H7 l( G/ [, J. l0 R
- const router = new VueRouter({7 `$ p2 j3 y9 G3 ?8 i1 A
- routes // (缩写)相当于 routes: routes- N6 m: E2 l# ~( y0 Q0 O
- })8 O6 V6 A5 u+ f5 R/ z0 N+ `
- , j; U2 e4 y" N
- // 4. 创建和挂载根实例。
2 i- q- z' I: ^# M - // 记得要通过 router 配置参数注入路由,
, i: @9 e9 B* b$ q6 | - // 从而让整个应用都有路由功能
O" i3 o# _, i5 d) w/ }: U0 g - const app = new Vue({# O+ |/ G1 ]& {/ }
- router0 s8 s8 O7 G# q2 w
- }).$mount('#app')
/ A7 I7 Y% i" F4 A- T -
. p `/ ]& U! {6 w( s - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
% f/ h$ _$ \& ]7 o; L% D3 H& {: a下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm3 A; W% x2 E! u2 S
- cnpm install
' i) q: Z G' q. z# Z - 8 ?6 Z, Z* z n
- # 启动应用,地址为 localhost:8080& J& D' V, O9 t2 O+ b5 h
- cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
! F8 A7 \- ^0 `) y
' A+ C2 z d, Z9 _5 R" X9 J3 D0 r( F* X# h9 v
/ x9 i- w8 U& Q" e0 u' D0 a4 ?6 u. I' B3 F
- ^# I1 u, |) ~& y8 U
% w3 }# B. f9 |# [: M- R3 \; i- I: {/ F& z$ b2 D$ |
; U2 K, K/ l3 F+ B
) V" k4 ]" I+ B. X! o' Y
& |" X/ Q7 F, S, I& M
* y1 T- B) Y0 z* j5 y. y |