本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
" G- C5 }1 T1 Z. }游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 5 V4 M _6 f- X+ Z
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
2 F' e9 k; F' k" s& `, G- <script src="https://unpkg.com/vue/dist/vue.js"></script>3 _ O$ o9 S! P7 T% \, x) n
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
1 p" o4 Q U5 L" t+ x - $ h! y6 k j) |5 f0 u
- <div id="app">( b$ \ v* T' G& X& m$ E
- <h1>Hello App!</h1>7 [' K6 X# i& ` n$ L
- <p>$ i4 \) t1 C# T1 L
- <!-- 使用 router-link 组件来导航. -->, b! `' U) O. Y4 m" g" M/ _
- <!-- 通过传入 `to` 属性指定链接. -->
8 @/ @$ R. T" J! r; f - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->! r# E% X2 |% b- ~& A7 ?
- <router-link to="/foo">Go to Foo</router-link> h7 w5 Z4 L& g5 Z0 _ V/ W: g
- <router-link to="/bar">Go to Bar</router-link>
3 q$ q1 Z$ ? ] - </p>) h/ t* n! a+ T3 @
- <!-- 路由出口 --># F* U0 }% w( j
- <!-- 路由匹配到的组件将渲染在这里 -->* [, ]0 e9 c1 u: A
- <router-view></router-view>" j0 B0 i! h O1 T3 @
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
; _' \& T; f4 M; R3 g -
4 d$ @% u/ \, U1 `+ Q" p - // 1. 定义(路由)组件。
) r0 g, ]6 j1 W& U7 |# X - // 可以从其他文件 import 进来
: t9 B0 i5 H( L2 [0 h - const Foo = { template: '<div>foo</div>' }: `; Y& i8 c' M
- const Bar = { template: '<div>bar</div>' }
3 e: X+ W/ s l5 c. `6 A7 H - , _& _" ^4 a5 P8 n; X
- // 2. 定义路由
% W# \; H4 U6 h1 [1 _2 o - // 每个路由应该映射一个组件。 其中"component" 可以是
4 e/ w" L6 S; ]& A5 {' E5 O; `6 P - // 通过 Vue.extend() 创建的组件构造器,* k4 k% m. a+ \" a! G. r# W ^
- // 或者,只是一个组件配置对象。+ U. L; D. b( \0 V1 m
- // 我们晚点再讨论嵌套路由。
, c5 o7 x( G1 `! z* x' u- x6 d - const routes = [/ G0 F- T" f8 S8 Z5 L" N( v7 B0 N
- { path: '/foo', component: Foo },
* p9 j3 L7 p0 N0 w - { path: '/bar', component: Bar }: b" L- g U2 B# U" U% i
- ]. u3 H! s; ?& K: j
-
$ V% f* O7 f7 [1 x" C) a) p - // 3. 创建 router 实例,然后传 `routes` 配置
A/ k( Y7 D( g - // 你还可以传别的配置参数, 不过先这么简单着吧。
9 S! ^0 K9 P$ Y5 f6 d( p. A - const router = new VueRouter({6 k( Z) \! J7 c: I! B* ]
- routes // (缩写)相当于 routes: routes9 y# }2 L! c# Q+ E) ?( Q e j
- })+ _* U6 J+ N; W6 S; d
-
9 q1 ^; ~: {- |/ X - // 4. 创建和挂载根实例。$ h- d5 w; F& p2 N
- // 记得要通过 router 配置参数注入路由,6 S$ {* c6 j" Y; n
- // 从而让整个应用都有路由功能
3 D4 J( S: L+ U - const app = new Vue({& @2 V& Y5 m$ p# k0 `# |; J7 y' m8 o1 V
- router
6 w @7 x2 A& N) e6 T - }).$mount('#app'), u7 o. ~0 R0 p1 }2 p
-
( b) O8 b( A2 I4 a4 |% k0 G - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
; d9 J! K# ~; W$ H5 o5 x下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm7 y: x1 M. G2 i p5 S
- cnpm install! o" c; `, ?# c. ?/ O
- 0 @8 y5 b, U, p: N
- # 启动应用,地址为 localhost:8080
9 |. U) e: m9 O7 r t) S5 q2 s; w9 t - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:( R4 Y% o' V: v( [& h, j; G+ z
5 R* H. b9 }6 \+ {/ h8 p2 e( S' V( ~6 T. ?0 ?
& ]. f/ B+ j2 k6 G( e+ o1 V/ `' K3 l( A8 c, h# q5 W
d) }# z( _! R3 Z
" P) \9 ?: [& s" l/ l
* X8 Z# u' |+ S# f2 ^4 ^: l- O
( E, i( o) f) W8 M% R8 E* F# U9 h+ q- [( e3 d5 x
. N" \# A) a8 K7 _! X! O
4 c& u Y8 O" N
|