本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码 * O t/ d9 P1 H, C
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 ) b# q# X5 ?) ?8 q( H) g( ?
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
& f3 u# R. N+ d- <script src="https://unpkg.com/vue/dist/vue.js"></script>8 H: f0 k9 [$ e# d2 ^4 D
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>. L6 }/ \1 [! M l$ G: T0 t- h
- 6 F3 B* _/ a8 A; L
- <div id="app"># ?' K; {% m- U; V& C+ v6 }
- <h1>Hello App!</h1>0 H( v1 q3 ?" D8 M. O0 {: X
- <p>
' i# R% e7 f j2 _ - <!-- 使用 router-link 组件来导航. -->" ?9 o4 @! S6 ^9 O
- <!-- 通过传入 `to` 属性指定链接. -->+ Q0 v, |0 i$ ~8 S, J( t) G
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->+ F t* E/ g) D0 i; Z3 I
- <router-link to="/foo">Go to Foo</router-link>
( ]" t- b8 |2 f4 O - <router-link to="/bar">Go to Bar</router-link>
$ E9 _( V5 \6 f- Z) H, i - </p>: I+ h% E# S* M% `- R
- <!-- 路由出口 -->/ x* v2 @7 p: |" S0 u4 t8 d9 A
- <!-- 路由匹配到的组件将渲染在这里 -->
: c( u8 ~+ L5 A - <router-view></router-view>9 K! j6 A+ O# U4 M" y8 u
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)4 P4 Y4 k( D+ a" s# Y# x
-
& z) A) y0 H# v6 e - // 1. 定义(路由)组件。8 m5 D7 \: ~! C5 N/ T
- // 可以从其他文件 import 进来% @2 ~, W8 a3 g' A# ? n, S6 @
- const Foo = { template: '<div>foo</div>' }4 S6 {7 j2 \3 k# Z" x$ l" J
- const Bar = { template: '<div>bar</div>' }4 a& f8 z ^3 ~
-
. O- q; ]# j; u - // 2. 定义路由
. u9 V0 p- S% g9 y - // 每个路由应该映射一个组件。 其中"component" 可以是4 J" |- C4 C J- E" f. i
- // 通过 Vue.extend() 创建的组件构造器,
; j. H, ?; Q4 u9 o" S& i1 ^# T% e - // 或者,只是一个组件配置对象。1 b0 h* M1 _) e- C( ]! Y. z
- // 我们晚点再讨论嵌套路由。% `( e6 t* m; z$ R$ y5 W
- const routes = [
& V5 K, H$ B0 }/ N& H - { path: '/foo', component: Foo },$ N- [5 B; \$ h5 \1 B
- { path: '/bar', component: Bar }0 {2 \2 ~: F- T( g
- ]
" `) V- k; H6 u0 W" V3 o - , R( a8 c$ s5 d }
- // 3. 创建 router 实例,然后传 `routes` 配置
3 W& l. \' H, f- |2 i' X - // 你还可以传别的配置参数, 不过先这么简单着吧。
9 G) t! U( J# P - const router = new VueRouter({
, A: K8 M# ? r1 B6 R0 M: X - routes // (缩写)相当于 routes: routes" y5 y3 i B6 R% O6 M& ~2 f
- })' r+ }' f9 j" S# B- ~2 I" c
- 1 @7 N' a% ^7 J
- // 4. 创建和挂载根实例。
5 [5 E. J* n6 e4 K' D/ P+ f) T - // 记得要通过 router 配置参数注入路由,, b# E! A) U, |5 I4 l& ~ v2 i
- // 从而让整个应用都有路由功能
' d# W. e% i! a - const app = new Vue({
$ h2 O( M' a2 W - router
1 S- B, M" y) i/ F- _ - }).$mount('#app'); Y7 W r; G: }6 Y+ J0 J
-
/ ~: L- y* I8 X; H" N# s: S+ Y - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 4 ?% M$ e- U. s' h
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm9 t; r# Y; b2 ~; Q" Y
- cnpm install( h" q4 @, y; t9 P0 I4 f, o* E0 ]
- 1 ^: X8 D4 E# z; {
- # 启动应用,地址为 localhost:8080
$ I, Z3 d; w: ~! Q d - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
# O8 j$ |5 E4 E, L8 |
|! u) @1 ?5 @' x. C( O9 Y8 t6 D4 k* B
4 i7 \/ G. s4 M
2 Z# `% |4 Q( M6 ^ I- y `% x
- L6 o4 \- N5 O- `, \9 Y+ z$ p
4 \% {6 N8 c' E( X3 \2 Y
/ v( |4 d# {$ `7 c* L) v6 x
0 o( s+ x5 Y& D0 P8 V/ D, A" u1 }3 b
1 {0 z# g/ b) H3 }$ V2 ^1 B/ w _
2 d) r/ | G* }0 a0 y
|