本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
& N7 n! T6 {. O) \6 h; X2 y游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
3 i j+ P) x9 G9 |. O& ~NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
% X4 E5 v7 h+ ]0 c# x- <script src="https://unpkg.com/vue/dist/vue.js"></script>
9 I+ C# j8 B9 p9 s2 o: O# }- ]; \ - <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
7 \0 h n+ N! r4 ]9 J% S -
3 Q+ y/ S& N# J$ p: o - <div id="app">* X* S* P3 M: e Z8 f+ r
- <h1>Hello App!</h1>$ l4 a* l6 _$ b9 @% m
- <p>
3 v& L+ k3 S1 t7 a# s9 O - <!-- 使用 router-link 组件来导航. -->
2 O- |; I. p4 n! r' P - <!-- 通过传入 `to` 属性指定链接. -->- ~/ y, J& z; B; ^4 D E$ Q
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->! F- r: A1 J" x' H( |
- <router-link to="/foo">Go to Foo</router-link>
, C7 n; k6 E5 q* _5 a4 E: S+ N - <router-link to="/bar">Go to Bar</router-link>
6 J1 w8 A. S- Z9 ]+ K! I! F - </p>! X* U" i" G ]- X3 v
- <!-- 路由出口 -->/ L0 G# p; l3 k- o
- <!-- 路由匹配到的组件将渲染在这里 -->
( q' Q! F% E% r5 h3 T+ w: j/ _ - <router-view></router-view>0 ~/ z Q N# B9 ^+ `" j
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
) N0 j3 T9 Y4 H% m/ ` -
9 H4 a! o: X) O! W( U$ ` - // 1. 定义(路由)组件。& g2 q5 v! u) W H! i& L+ P
- // 可以从其他文件 import 进来
. p% Y. w7 q9 F - const Foo = { template: '<div>foo</div>' }- j F; T J2 N6 l8 C( T+ \& E
- const Bar = { template: '<div>bar</div>' }
3 x# o8 F1 |) l% h -
: o5 A8 u" j6 x# n( Q( G2 e - // 2. 定义路由* _# }7 g+ _' s: ?
- // 每个路由应该映射一个组件。 其中"component" 可以是
3 x8 R1 y0 j4 O! F - // 通过 Vue.extend() 创建的组件构造器,2 b- n! O) Z+ v5 _. n/ Z5 v5 u
- // 或者,只是一个组件配置对象。 H- W8 `7 X1 J6 U
- // 我们晚点再讨论嵌套路由。
- U; q, K1 f( i5 |" v0 { T - const routes = [8 D0 ?/ U/ B- W/ y" l5 U% P1 i8 n5 `
- { path: '/foo', component: Foo },2 Y4 S7 U4 V: }0 s- g! p1 h3 o
- { path: '/bar', component: Bar }
1 I0 b4 ~0 d* z9 G+ D8 k8 u - ]: d1 s6 j0 X4 l9 f
-
G" |4 T7 ^& {& Y& g7 r+ q - // 3. 创建 router 实例,然后传 `routes` 配置1 O& f$ G! t0 E
- // 你还可以传别的配置参数, 不过先这么简单着吧。) n6 C: C% H$ ?( ]' U! ?
- const router = new VueRouter({6 I4 z3 ?! H( `1 a$ Z3 n
- routes // (缩写)相当于 routes: routes
, u) Q4 [0 Y) {$ F9 m* T# d - })6 t/ `4 e! t! O Z4 `
-
! d2 c" }/ X4 ]4 w - // 4. 创建和挂载根实例。5 T, @5 c- w8 @0 u% M0 \; h0 |
- // 记得要通过 router 配置参数注入路由,
5 G4 G: B% T$ v: X% s2 J - // 从而让整个应用都有路由功能5 s. X0 o& q& O& `" f9 s" p V2 u
- const app = new Vue({
, c9 r1 N, R0 V3 y# X& z5 O2 L" t$ f - router2 N1 S. ^7 k; a* W
- }).$mount('#app')2 \+ S) y% J9 W! n
-
1 f5 @& Y O" L) n1 F6 C4 a - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 # ?) v4 ^: j" C% \% J0 u: |
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm9 P+ [8 o9 Q o" f7 `) N
- cnpm install
u0 i P1 i7 I) s% x% M2 M* C* Y4 N( M
/ {; s& F' g4 q- # 启动应用,地址为 localhost:8080
; \6 h% g6 m3 _5 x - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
8 ?, l6 P5 f+ B/ {9 T( }9 [; ^* @1 B
; B: \7 [$ x' I# S, V" |
7 O& x2 c6 X! P9 y5 L5 J! c% c# x! U4 b% G [ o0 A0 y* L
3 U# W- ]& N, ]& f
' \# q. p, U: I: `" F% V( I' p0 ]- p6 F2 u1 p* \3 u1 _
: V; l% u! Z0 q( a
N1 ^" [/ [5 r" R- y& s
% v9 E& j, M6 i1 D7 F: x* @" W- ^2 V) \/ w+ i4 E
|