本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
0 \9 S2 U S% M$ j* f游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
/ t/ b0 q3 _: Q; D" D8 W4 FNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码. D2 t$ i& x# L# o/ j, \% x
- <script src="https://unpkg.com/vue/dist/vue.js"></script>$ e+ U/ a6 ?' D( n7 d4 I9 W) c j
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
`8 i% c' k+ V3 t) c3 q. ^1 O - , V! o3 s1 R- I; @
- <div id="app">0 P$ k+ ^, b) D* |" G0 j
- <h1>Hello App!</h1>( C: M! Y" v, B
- <p>
0 p: b2 y) d+ O* [ - <!-- 使用 router-link 组件来导航. -->9 k$ M7 _# `& N* ?" }
- <!-- 通过传入 `to` 属性指定链接. -->$ R, N, [3 [# [' G1 X6 O
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->$ ~! i' O) J# w2 u9 J, U( z
- <router-link to="/foo">Go to Foo</router-link>1 v, c1 h& u9 W _) y3 i! ~
- <router-link to="/bar">Go to Bar</router-link>0 L4 n% }$ s! M v" V7 ^3 s
- </p>+ A, |# d+ i% c2 u5 Q8 g$ T3 }: w
- <!-- 路由出口 -->* w7 s- P4 u! `$ y
- <!-- 路由匹配到的组件将渲染在这里 -->
1 ?; m0 h' o$ W( b4 _ - <router-view></router-view>
# c" f6 Z$ l6 Q6 m - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)6 D; V9 I+ `" w/ T+ Y5 F9 n7 a# W
-
+ T7 v( i3 N+ j `3 x - // 1. 定义(路由)组件。; U: ], O* I/ I( c
- // 可以从其他文件 import 进来
$ Q w( j) m, T/ o* a - const Foo = { template: '<div>foo</div>' }' U8 I3 R0 ]' }5 k
- const Bar = { template: '<div>bar</div>' }) @# S/ R) F: v3 z% F! ?5 b
-
7 O" |8 W/ g/ _: ~: ^, M" b - // 2. 定义路由$ u0 ]$ \, R4 _( |! t$ a, t
- // 每个路由应该映射一个组件。 其中"component" 可以是
, Z: b* d6 Q8 C4 M2 \. x - // 通过 Vue.extend() 创建的组件构造器,
# C# U5 q. F: S5 r d) s9 A( h7 T - // 或者,只是一个组件配置对象。7 R* c' f' n, S9 S" @1 s
- // 我们晚点再讨论嵌套路由。0 A$ H4 o5 E" L2 @! G
- const routes = [; v# N; }- w" X. }$ t
- { path: '/foo', component: Foo },( q9 y3 x& v$ E5 h9 c! |2 X, Z
- { path: '/bar', component: Bar }: o) M- o. z. s2 _3 j7 U# C
- ]
2 ~ x; h2 ~% T3 _ -
7 `0 K X4 H( d' U9 i6 ^ - // 3. 创建 router 实例,然后传 `routes` 配置
7 ^- ~" e9 c$ V# o - // 你还可以传别的配置参数, 不过先这么简单着吧。: Y- i) E0 i8 V y( ~
- const router = new VueRouter({8 b/ y& Q# m/ |) N$ e/ A8 i1 c
- routes // (缩写)相当于 routes: routes
+ s+ ~. ]* s( g- ~- o - }). c9 H' b+ |- r" Z, _
- : b% i0 V L* |1 Z& I
- // 4. 创建和挂载根实例。# G7 Y% \0 U `3 X! G9 O
- // 记得要通过 router 配置参数注入路由,- h" G% `: m! y" L, s+ Z
- // 从而让整个应用都有路由功能
$ f) D) {% a0 s& w5 O6 a4 x - const app = new Vue({
. A) U# y: J) ^0 A0 U - router
# C2 Q$ p5 m2 L, p/ ]8 u0 \7 s - }).$mount('#app')
" }! K1 b8 P' I7 J$ i4 F - % x8 \! j$ T8 B t1 q6 T
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
0 ]1 P# `4 C- ~1 _下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
7 N" C: |2 _, n' B( J7 B - cnpm install1 p$ _! W( U* e6 ~
, o5 p7 {" }* P8 ?3 a- # 启动应用,地址为 localhost:8080
8 N2 C2 H" h0 T - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
; d* Q4 k$ }/ T, _. P9 r$ P, c# u/ w1 H G) b, r
" c& u3 U9 y& [7 k! d$ O) Z3 v1 c2 P* B, c q' r+ U" r
8 l+ e- O0 Q2 ]
( o5 \, K9 G9 ]- a0 `1 y: e( F/ U/ J" }* ?. d( a1 G
. {2 p4 X: q0 `
1 l! S$ D- r; `# M
, \1 _0 k9 E8 @& k# |! ?
' Q" t% a# H* [
- T2 b4 r+ N# P |