本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
4 f$ S1 `$ U& D% g* [* y/ m游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
( w+ q1 f& E* W0 r( }* p: X6 q* nNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
, x8 A: f( u4 i4 G+ q! E% j- <script src="https://unpkg.com/vue/dist/vue.js"></script>" D! u% d7 ?3 o, c; M8 V1 Z* ]
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
: |& J" X- l( g3 ^( {% }7 A5 I - ; M$ e& P9 P. A) T7 k! @
- <div id="app">7 n* n1 U, w: S$ s
- <h1>Hello App!</h1>
! R W! { ^: K' T3 j9 o - <p>9 Q2 Y9 ], h) r c7 {6 n5 a
- <!-- 使用 router-link 组件来导航. -->/ m L) |2 [# T8 [' r
- <!-- 通过传入 `to` 属性指定链接. -->) S$ W8 j& K1 S; D5 T) m/ V
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --># W3 x8 @- C/ f; W/ \' Q
- <router-link to="/foo">Go to Foo</router-link>% f( z4 ?6 f3 U3 ~8 |4 z
- <router-link to="/bar">Go to Bar</router-link>
; `/ g4 l) z* p" q+ \/ P( r: ]% z - </p>
3 k3 l, B! _" j1 Z0 o - <!-- 路由出口 -->- ^9 ]: y, ? [) a$ W# t8 t5 V
- <!-- 路由匹配到的组件将渲染在这里 -->' n) Y: i: Y H
- <router-view></router-view>
0 F7 O+ `, u6 p1 x, a4 W - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)/ n& }" Q$ G! B/ H; P! g9 p0 R3 k
-
2 V) w) o) c' c1 w8 p - // 1. 定义(路由)组件。; I$ L% E' q7 l# L5 [) u, |
- // 可以从其他文件 import 进来
- Z. F9 Y. @6 G2 b - const Foo = { template: '<div>foo</div>' }9 a% \$ B+ }7 j! ^
- const Bar = { template: '<div>bar</div>' }
3 t' j9 }7 A+ k' m$ F - * @2 { {6 Y* b7 b
- // 2. 定义路由5 _% M' E7 `% Q7 k
- // 每个路由应该映射一个组件。 其中"component" 可以是$ n% E" D3 }% M, l: z
- // 通过 Vue.extend() 创建的组件构造器,
! u2 q- B+ C6 p9 S - // 或者,只是一个组件配置对象。
$ N' O% M" n: T0 H9 y) ? I) O- m - // 我们晚点再讨论嵌套路由。2 Y2 S6 {8 N4 J3 l, c- n
- const routes = [
4 [+ h4 A+ x6 a6 O - { path: '/foo', component: Foo },
2 V1 c/ o: h7 h$ A2 M8 z1 F - { path: '/bar', component: Bar }. i1 b9 S5 C" Q" ]' y
- ]3 P- H0 n! p) W; ^* j4 d1 {! A
- % R6 Q* I. O( ?1 a$ @
- // 3. 创建 router 实例,然后传 `routes` 配置4 E) t! U) T4 n4 z$ a
- // 你还可以传别的配置参数, 不过先这么简单着吧。
1 K- Z, X9 o. ^& y2 \0 W2 S6 @; j# Q - const router = new VueRouter({
& R' P3 Y" i3 J. ~( Q/ @0 z - routes // (缩写)相当于 routes: routes* I0 P; d% V% r7 P
- })
$ p6 q9 F$ |" F! L0 D4 X - * S$ w, R1 g9 m1 q
- // 4. 创建和挂载根实例。
- E, s3 |3 w7 c1 v. d - // 记得要通过 router 配置参数注入路由,; ^) A7 O' I2 g/ f' I5 N4 F2 Y3 F- {
- // 从而让整个应用都有路由功能2 S9 g2 t3 s5 Z. l. r2 i
- const app = new Vue({1 P" @/ E- T" F: m' H
- router7 R* q1 z5 u& g
- }).$mount('#app')
6 E# O2 x" C; W3 X n -
9 W p" a9 S" U - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 : r/ @) }* j9 T5 Q6 U
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm/ d# m. d, ^/ M* F s+ c7 L
- cnpm install
7 e3 S/ I. p' `" }/ @# @# a
0 Q4 w' o+ c7 A' i+ ~- # 启动应用,地址为 localhost:8080
- Z4 ^0 t5 [' s$ E+ J' P; y% m - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
n! c. W, m& t$ J* H- e2 @ Z3 n* V, l- B! @+ w
- U6 t1 t) q9 m8 C# z/ s% W
$ [9 J. _& I3 o# I& z
7 }# k: L3 h' Z+ r# p' P0 N/ y, J `$ j
' G: O1 i" J+ F: g e$ G! y
9 K# P# {- \+ n: T$ f* K( n
+ B z+ \8 W9 B- k
& A2 s# }8 T6 `! R9 m/ h4 P3 _" U0 Z+ T7 R# ?
3 E% O7 C( C- r* Q D0 b2 Q' C
|