本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码 # R4 ]( d3 T+ X! S
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 7 H" x }- d. \; I% _2 a# X
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
2 y3 H8 O+ q, B5 }" i% v9 O0 A- <script src="https://unpkg.com/vue/dist/vue.js"></script>
+ o0 _5 U/ ^& Y' b5 D* g3 j - <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>4 ^' t! U8 ?( Y3 t# b" H. P r; e8 u
-
2 m3 C m/ V' U; [ - <div id="app"># V1 e7 r: P8 J2 _1 c
- <h1>Hello App!</h1>
4 O5 c7 ^2 q( F% E0 T( a - <p>- b6 o0 B: ~" O' f- { z4 Q7 N
- <!-- 使用 router-link 组件来导航. -->
7 w% |9 o! f8 n5 Q2 n - <!-- 通过传入 `to` 属性指定链接. -->3 `0 o/ U4 q" d! d$ f! y
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
4 x" d; @* }/ b6 i- e" T - <router-link to="/foo">Go to Foo</router-link>
% K5 c2 h1 J; N2 Z0 H5 B& f* ] - <router-link to="/bar">Go to Bar</router-link>
! X; d% I, l5 M' O) P - </p>
( I8 l- K/ J# F - <!-- 路由出口 -->( v! \. d" U" ^% u' B- N
- <!-- 路由匹配到的组件将渲染在这里 -->; [" z0 q* F6 f7 U. b+ ` }
- <router-view></router-view>
+ t- g m' @3 t - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
& |# a! j& w: F/ A( \8 m9 m4 i -
V. a# G' T& y. b, H E$ h - // 1. 定义(路由)组件。6 H0 v0 ~% U4 c( m; h* Z/ I/ t/ \6 K
- // 可以从其他文件 import 进来
+ [" [9 s* ^5 m- i' R! _" v3 N& k - const Foo = { template: '<div>foo</div>' }
: _$ h0 M t9 A" p! W/ E. t! r - const Bar = { template: '<div>bar</div>' }
/ Z9 Z- D5 }5 d; }. L( P, Y -
9 l# ~8 `4 J0 G Q) t - // 2. 定义路由
V3 ]# P4 t- M* A2 d/ g - // 每个路由应该映射一个组件。 其中"component" 可以是0 K! R$ A# P3 f. \/ r# V, B! _0 g
- // 通过 Vue.extend() 创建的组件构造器,
& e% C- o# {# x$ M( d& R$ f2 s - // 或者,只是一个组件配置对象。6 b; {- a- h# `+ c
- // 我们晚点再讨论嵌套路由。1 t7 J% z: s" G* f+ l/ r* {
- const routes = [$ @5 c/ b3 \3 K! L2 n& [$ h
- { path: '/foo', component: Foo },
3 v; H, Z! T$ r/ e# Y - { path: '/bar', component: Bar }
, C4 Q) U" L; `: p# J) j - ]
4 U$ g% S. l% G3 R7 J -
# J o/ c' }' p6 p - // 3. 创建 router 实例,然后传 `routes` 配置8 H3 w2 D+ m! j1 b- E/ ~
- // 你还可以传别的配置参数, 不过先这么简单着吧。' F) T5 o' i: e7 b) P- @+ j6 ]$ r; Y
- const router = new VueRouter({
& [+ g2 k, [* H' d+ A - routes // (缩写)相当于 routes: routes/ b* t' t! u) N t
- })
- ~9 [$ T! | g8 A3 I- q - 7 N y5 s5 k \! d4 @
- // 4. 创建和挂载根实例。
' r( p: E$ w+ C( Z2 _3 u& {! V - // 记得要通过 router 配置参数注入路由,7 N4 N$ {; M! @ H% x# u8 M/ q; G
- // 从而让整个应用都有路由功能
) g6 \1 W6 [7 _: E# S+ Y) ^ - const app = new Vue({: m* D; ^% [# X, n8 h5 _4 ]8 R
- router
+ r, P8 o( Z* Q( p' \6 {( e; t0 O; z - }).$mount('#app')
# `5 O; {0 `& Z! Y" P, l - , E) h P+ y& _) Y6 o: u/ @
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
! G1 D1 R% |8 G下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
1 \: W' f5 S& q F1 e - cnpm install; I2 M: E; H) l* n% j. @
- - j: G) {) l0 C! X- n# `
- # 启动应用,地址为 localhost:8080& B$ ]% S# ?5 j
- cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:% f7 C2 ^9 K+ v# y/ Q3 x: J x
& w% u% i$ w% ] m; {+ s. I! u* M
) ~1 {/ B; K. E$ |2 O
# h# g! T! l/ O! H3 j
9 {4 d$ _, P0 Y2 e( ^% K- d
I/ e% R) q* b1 M, C) M8 |# b& a1 a. U- ~; I( g* a8 T8 Z% P
& h- _8 p/ x" a/ Z
5 ~5 E9 W1 l! W' z- |
f0 \+ n; j ^5 y
: f* ~2 g* a& v5 @ |