本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码 : i- Q" Y$ `0 O0 p/ ~4 N+ L; I2 d
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 7 N8 _& i" n' y# `. B4 u( q
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码# q" R% p. O: G+ m5 Z7 ]
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
# S+ g3 F) g4 A& A5 ` - <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>0 z; V9 a! _. s, _
-
- [( v6 n! x" ]# d- I" h - <div id="app">5 y. P9 R3 g3 B1 P$ d l2 V$ ?5 S
- <h1>Hello App!</h1>$ B9 Y. {2 ?! Y4 E: T0 Q: n
- <p>
. K ~$ P2 U4 z; _4 u8 M - <!-- 使用 router-link 组件来导航. -->
* d9 P$ z d9 [5 v, F: g - <!-- 通过传入 `to` 属性指定链接. -->4 E0 I5 |, `4 j4 M" B# S; v) V- X
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->) H( Q9 v4 P8 {, }4 B
- <router-link to="/foo">Go to Foo</router-link>
: U: c Z" Z6 i7 e* h - <router-link to="/bar">Go to Bar</router-link> n/ E# U1 B8 r7 C( o2 K* t
- </p>
+ w! p0 i: x) w2 Z - <!-- 路由出口 -->
; ~- ^- {+ z8 ^! E - <!-- 路由匹配到的组件将渲染在这里 --># |+ f/ \/ h+ N+ i3 `& X, ?
- <router-view></router-view>
Q& k" W$ k! ]$ k, \8 f; O - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter), u) |. y! {3 t& X, _1 U- c
-
& v; Z+ Q8 r3 `+ C R3 f - // 1. 定义(路由)组件。
, Q P% H1 {! j4 S. O# R- X - // 可以从其他文件 import 进来: y# _8 v( C1 R2 F. Y1 m5 M4 Z8 d( ]
- const Foo = { template: '<div>foo</div>' }
t' |5 r- P2 \6 u( p, j2 U9 c2 H - const Bar = { template: '<div>bar</div>' }
9 ]7 {; C9 o8 o4 T8 i -
; l' n3 u- p, }6 G6 z$ y6 w: n# i4 t - // 2. 定义路由
: p# A7 ]- x! h, C- T" A# k - // 每个路由应该映射一个组件。 其中"component" 可以是$ j0 i0 l+ d' S. U* j
- // 通过 Vue.extend() 创建的组件构造器,8 | R, R% ]- y3 Z! ~
- // 或者,只是一个组件配置对象。1 o/ l& Q: H2 w* q, u& L& ^/ x
- // 我们晚点再讨论嵌套路由。
" N! S* G8 A. f" ~" T- R - const routes = [
$ D- G1 R ~6 ~0 P - { path: '/foo', component: Foo },
& `( m" J e2 {% e9 W0 } - { path: '/bar', component: Bar }
: T. I3 j- {$ j6 D - ]' f( E9 ~. G5 n+ \1 p2 H
-
$ N: n, z0 g3 D$ l: N5 U- F# o) n; q - // 3. 创建 router 实例,然后传 `routes` 配置
2 Q8 q* W" d- _2 Z8 Y$ p7 {: C) ? - // 你还可以传别的配置参数, 不过先这么简单着吧。
0 T, V' v. q$ y2 C# S5 E* o( _ - const router = new VueRouter({1 ?$ R: ?9 ]' a- U K
- routes // (缩写)相当于 routes: routes& _5 Y* B6 {7 w6 I
- }): m* k' K' S0 @! }( f
-
) ^) |0 J" K3 ~$ I$ P - // 4. 创建和挂载根实例。8 V$ K. `6 M9 d, O3 ]
- // 记得要通过 router 配置参数注入路由,$ E9 R1 s$ h8 H0 j" q
- // 从而让整个应用都有路由功能- Q8 r6 P4 b4 W! Y8 ]1 V% K
- const app = new Vue({. X1 j* L( J& V
- router9 L0 n% [1 f8 }! T, U1 d
- }).$mount('#app')
" e) ?. `: t7 c# Z3 s -
8 E9 Y- x5 v1 ^& I - // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
& y/ ?4 E8 f! K+ ^+ l2 u. o0 y下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm$ e7 v! F5 M9 T$ r( C R+ @
- cnpm install7 q6 {, z7 j: x" P1 p
- g# y; y3 @6 V1 x; v
- # 启动应用,地址为 localhost:8080
( s4 Y5 ?6 s2 i1 x2 J - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:) {9 y6 c+ S# n# \! V7 e! B
: Q+ r/ H! j B
' Q7 s) [& B+ z! _# S) S* T7 l* Z( ^1 v' Z" w
& c4 O: ~! a/ \
; L4 J. ]' k W3 f" B7 p
) k# D7 a' w/ N1 l& h
# ^0 y# {, _3 n2 x
O! Y, O0 a: o# u. v; t
7 X+ _6 B8 M9 A" _" [: ^6 m: B p/ o% X _; S
" P, E( } }0 E7 _- ]2 L
|