|
本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
8 G/ A, b, J3 {: ]0 n" Y# W2 e$ d游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
% I4 q: P- V& v2 LNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码/ R+ ` Z1 @8 _2 W8 E
- <script src="https://unpkg.com/vue/dist/vue.js"></script>% N w" v' D9 v, l' c) o% _$ H
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
# z5 x& N" d% }1 r; a5 i5 o, p -
. G z2 p, y$ q - <div id="app">/ |/ ~7 F0 d( _9 u
- <h1>Hello App!</h1>
) b/ o4 ~! k$ P4 m" Q$ G - <p>
2 S i9 ^ M+ r - <!-- 使用 router-link 组件来导航. -->* g$ Y8 T# `) p% U
- <!-- 通过传入 `to` 属性指定链接. -->& [5 }' e! e1 {5 v
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
( H, J! I" V1 s( W1 x- `/ s" G - <router-link to="/foo">Go to Foo</router-link>. O4 ^/ @ U5 I9 _
- <router-link to="/bar">Go to Bar</router-link>* D; _. G- ~5 t! t9 J9 p# g/ W4 Q" C
- </p>8 ^6 H* Z! B. {7 N( Q& T- \& L! ~
- <!-- 路由出口 -->+ s% Q7 I8 |8 T& d% ^/ r/ L* V
- <!-- 路由匹配到的组件将渲染在这里 -->4 F$ I3 v0 [9 \, R% F
- <router-view></router-view># o$ e0 L, h0 n D. X( _( I1 _
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
5 P7 ~) Y, _! O8 r3 `9 U% M -
. m" d7 y5 t' \! b6 C+ R3 e - // 1. 定义(路由)组件。
3 b |7 ^5 s) s- N6 D, Z n4 E( P - // 可以从其他文件 import 进来% Y+ o. j! z2 h- X
- const Foo = { template: '<div>foo</div>' }; P2 @) I3 [; x6 m/ D# Z4 h- k
- const Bar = { template: '<div>bar</div>' }: `; d3 }4 y9 q: }
- & a c9 a( a+ D8 R/ q" u, O- a7 n
- // 2. 定义路由
1 m9 t1 ?8 f" C% h' d( k - // 每个路由应该映射一个组件。 其中"component" 可以是
5 k1 M( g8 r" {( e2 Y/ a - // 通过 Vue.extend() 创建的组件构造器,
$ W& z& B* C, E5 D6 k9 B8 q/ V - // 或者,只是一个组件配置对象。
( [. P4 c0 o2 M& t6 c9 B9 M - // 我们晚点再讨论嵌套路由。; S. P0 |$ N) e# Q0 q' q) x
- const routes = [* p" O$ F) h6 e. Z+ @: n0 P L) E- E0 }
- { path: '/foo', component: Foo },
6 E) ~ b( n7 W, A) f - { path: '/bar', component: Bar }
9 R2 U1 s* v2 i4 s* L: M: J. Z' q6 Q - ]
* D$ G) b) X/ { -
" k! n6 s+ G6 r7 B/ q. I E - // 3. 创建 router 实例,然后传 `routes` 配置
; \$ G" Q$ `9 B# W" e2 W# u# e - // 你还可以传别的配置参数, 不过先这么简单着吧。
* S0 I. C! _! d2 u1 W" F) \, k6 f - const router = new VueRouter({
. A. @1 R$ M5 k - routes // (缩写)相当于 routes: routes6 N4 @- {: [6 r8 u! B9 Q
- })% ^1 C K9 h2 R+ Y0 K0 v4 s0 i
- 6 g' X7 k$ }+ m/ V: d, l" O8 }$ s
- // 4. 创建和挂载根实例。1 k( C, h% t/ `( D
- // 记得要通过 router 配置参数注入路由,5 H" q0 J4 h& o) x- f" ~. U" F
- // 从而让整个应用都有路由功能( ?' `8 J! j, T& y
- const app = new Vue({
+ {1 J4 _4 i" o6 B. b# @ - router" |0 Y0 N; u) q$ S
- }).$mount('#app')
) A7 y% E9 |5 \( w3 z7 ` - 2 `+ p: W+ _# i+ h) x
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 " }3 d; G+ v) f
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
* W4 F% ?9 J; ^: { - cnpm install
3 u' D' q1 F1 `; ~
8 Z" H/ m* _7 g. g8 k3 P1 h1 z- # 启动应用,地址为 localhost:8080
" H, q* v$ s$ d3 d9 ] - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
. p) j2 R% N8 K1 p5 l! w3 h
7 e# t( p8 K5 w8 j. h+ V; ?( H& H9 w) h8 K& Z
! n, F; P' a# P' J* b+ l3 ?4 e
% j7 |. U5 o- y5 k
7 p" F" \8 ]$ u8 C( D
4 h4 }+ n# ]) X& x" L# E; j7 `
( ~! ^ s% U: ^/ z$ T: k7 x8 R3 X- p; p/ _: p# P: ?! Y$ d. ]. }
9 _$ Q. V$ I* x9 F( s
( ]! t# T. X' Y7 K' ~$ J% o: W" k2 W8 z4 i
|