本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
/ Y. F4 W8 N! {6 u r; _2 N0 Y游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
3 a' Q% F. }0 p1 z4 VNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
7 p( ~. L4 w: k6 _1 ^. D1 J, K9 d- Q' Q- <script src="https://unpkg.com/vue/dist/vue.js"></script>
9 j5 F( b. B/ m& V - <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>: z- K! [5 [( }$ e' {6 e8 t
-
, V( G" W" M8 F/ G - <div id="app">
0 H/ M1 j t. i+ j7 {. ` - <h1>Hello App!</h1>8 {: w* \; [$ C# n5 O( J8 @: h# L
- <p>
9 M" l4 I$ B8 P, V1 t, y8 k8 w+ e4 ]+ L$ y - <!-- 使用 router-link 组件来导航. -->
9 T2 ?1 U- M1 C3 @ - <!-- 通过传入 `to` 属性指定链接. -->
* V- V" ?3 }8 K7 j4 d% X - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->7 a' z. ^' c9 J- [
- <router-link to="/foo">Go to Foo</router-link>
+ T' ~4 n( F/ l5 X a1 s: P' W - <router-link to="/bar">Go to Bar</router-link>: ]: s9 S6 x. C l" P L
- </p>
: W& t. L1 d) @7 I6 B - <!-- 路由出口 -->, Q. |4 X7 `% r. ^& o
- <!-- 路由匹配到的组件将渲染在这里 -->' B3 H! L- n% ?& u; S) K! x
- <router-view></router-view>% O# ?. t& ^9 X+ V0 _. K' I2 F
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
; u' Z8 e6 E$ A, h1 k: g C6 O" X9 _9 } - + d& u1 d4 J% g
- // 1. 定义(路由)组件。
! ?$ Z" f0 v. a3 w9 m - // 可以从其他文件 import 进来
; }% w9 J9 z7 n6 r4 d* S - const Foo = { template: '<div>foo</div>' }) C) r# n# V8 _7 h8 P" d/ b3 k) {
- const Bar = { template: '<div>bar</div>' }; p1 x! U5 J/ O4 g# g$ \3 r
- 9 ~% N( ~$ [: ]0 R8 o+ n
- // 2. 定义路由$ t1 m8 _( e* U% c+ R4 r" ]
- // 每个路由应该映射一个组件。 其中"component" 可以是
. P* w! z2 i! N/ W' t# Y1 Q' I - // 通过 Vue.extend() 创建的组件构造器,
$ P4 p8 P! B- D5 I; g - // 或者,只是一个组件配置对象。! ~& M* _9 }8 M& c) H' R
- // 我们晚点再讨论嵌套路由。; s% q, E* j' V" ~9 }/ \7 S. u
- const routes = [0 K2 g! M% e& B% i% o- i( P. J1 a5 j9 a
- { path: '/foo', component: Foo },$ y" t* r1 l8 @, f$ z
- { path: '/bar', component: Bar }
" b A5 _. e: r5 W& B) o6 ]# H5 h - ]
, T5 v; t8 W0 e" U; \ - & Z2 z' Z4 R- _* n0 c# v1 e8 m
- // 3. 创建 router 实例,然后传 `routes` 配置
! ]$ t" x4 G0 [# \: }5 ~! @' m* v - // 你还可以传别的配置参数, 不过先这么简单着吧。
5 i9 s4 B9 e- [8 ^7 U' a - const router = new VueRouter({
X" l a. R! S0 d. y! w( u0 r. b5 f - routes // (缩写)相当于 routes: routes
v, h4 A6 i, G( ^1 v - })
5 u; @4 G) b ]; Q -
+ @/ _% ~4 k5 B! Y - // 4. 创建和挂载根实例。3 @4 X/ E3 K# I
- // 记得要通过 router 配置参数注入路由,
9 F' V7 `/ ^+ F' U& F4 W - // 从而让整个应用都有路由功能
+ U; a$ f& E. J1 E7 q2 t6 @1 \) ` - const app = new Vue({, C/ v! _2 ~3 n9 _2 D; c" Y6 ~3 N
- router1 {. v$ o( t0 ]: q, ?7 W
- }).$mount('#app')
+ B' l6 e" U# y3 [0 ?& i$ d -
/ F) M5 [+ P* W: X8 k' \ - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
7 o4 z4 d3 D7 ]0 ]1 }, Q6 c下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm2 c! v1 S( D6 D q% l0 _% _
- cnpm install' |! O1 H7 U0 L
- * c& Q' [- p" Q# [: |/ q) s
- # 启动应用,地址为 localhost:8080' j8 E# K' \# ?
- cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
8 P. q& p! U! T v2 ~$ A: U/ i2 V- M" _- }6 K; Z A' M
* f$ l: X3 m' U& p( r8 P7 p
2 T: q/ r1 i) J6 }! Q
|% S. S& c2 `. W5 E+ p8 P. E6 [- N$ b1 ]1 z. H" ~
`3 x, K+ r" N @" {; p
( n1 s' l7 Y' k0 \. i6 B! M
\! h4 w5 G R5 x& C2 h+ R9 b( q5 S' p* w" s/ X' I. S; g
& ]% h# G6 F! M) H
( B B6 c! d: v' g4 e+ s" _
|