本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
5 h7 o7 ~1 Y9 q1 j) E3 r游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 7 S# H) W0 E$ F* K' ?( t2 L
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码
3 _' [; y! x- u F5 r) p, y8 u% k- <script src="https://unpkg.com/vue/dist/vue.js"></script>- n& Z) o8 |! W! \0 D, g. b
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
. F1 H4 X# m( l i' i, Q* c- T0 s -
, E' }0 r2 _( J. Y - <div id="app">$ A1 {: T9 P2 v7 @# V
- <h1>Hello App!</h1>
) H5 y2 E) K; d/ c3 O- r - <p>4 w0 s! l& ?0 M* `, J' u
- <!-- 使用 router-link 组件来导航. -->
; }" t0 _0 G$ M: F: V - <!-- 通过传入 `to` 属性指定链接. -->3 u' B1 z4 [$ F2 w4 Y2 ]& F! o% L
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->6 N; m4 M n9 E" U6 n# S1 J4 n9 F7 w
- <router-link to="/foo">Go to Foo</router-link>
. l9 B8 D8 ~1 d6 _ g2 { - <router-link to="/bar">Go to Bar</router-link>
' J g0 n6 \- C# N, Y - </p>
2 A7 w/ V1 f9 H9 P" d2 Z4 h" Y$ ~ - <!-- 路由出口 -->
; ~# a5 T. K$ R5 Q - <!-- 路由匹配到的组件将渲染在这里 -->
! m' I! e! f- H) U0 B6 q! d - <router-view></router-view>2 G: U% {# f. \0 w
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)) _" j0 G8 I$ ^& b! w. v
-
* S- H# d. i$ ^. e' C$ k - // 1. 定义(路由)组件。4 n* B/ c; b! g
- // 可以从其他文件 import 进来3 L' {' n; l5 |1 P
- const Foo = { template: '<div>foo</div>' }1 h; Y, \, x7 }) D/ ?) V" M6 Z$ e
- const Bar = { template: '<div>bar</div>' }
$ g0 N5 O0 X$ S. Y5 O- ? -
% f) A! N- X& \& O - // 2. 定义路由7 e) p7 n% K5 u- [" [# t: B
- // 每个路由应该映射一个组件。 其中"component" 可以是
, W" a6 c" @! E+ f1 _( e$ i/ s3 v& ^6 K6 P - // 通过 Vue.extend() 创建的组件构造器,
4 w+ H7 h$ q! E$ v* Z. k) S - // 或者,只是一个组件配置对象。
' A' _2 @2 T5 B } - // 我们晚点再讨论嵌套路由。5 U: n4 _. Y2 ?0 ~9 P
- const routes = [
* v9 k4 q; K& @% o- w8 U6 l! I* Z - { path: '/foo', component: Foo },8 ~. l9 o3 S8 D7 b2 A, g
- { path: '/bar', component: Bar }
- G8 H& E+ X- U- c: x1 e8 [ - ]
* U8 N% V; T$ I1 `2 |2 N2 j -
( ~, C4 }% Z/ e1 e. Y - // 3. 创建 router 实例,然后传 `routes` 配置
; `% ]9 @( M% c$ `* h; D$ J4 D/ u5 P - // 你还可以传别的配置参数, 不过先这么简单着吧。
) ?0 k7 s# f K0 e2 L4 w - const router = new VueRouter({
7 T& _, j9 b2 U# H - routes // (缩写)相当于 routes: routes
" {8 E" g8 T% U - })8 o/ r1 y. w3 g4 \* Z
- : K3 Z: m9 I! @- C1 ?3 G
- // 4. 创建和挂载根实例。
" E1 Y2 B4 V& p0 ]* _ - // 记得要通过 router 配置参数注入路由,7 Z; H8 e" j$ N8 s' g3 J p: C
- // 从而让整个应用都有路由功能0 R6 f' L& A6 u7 k! B/ [# s& \$ Z1 H
- const app = new Vue({
5 ~' W# n8 x6 ?9 ?7 G( O/ N - router, b; H1 R$ @; \$ O- T7 _3 d- p
- }).$mount('#app')0 K5 F$ Z0 M. ?# ~; Z9 W% ?5 }. U! K
- 1 ^/ x( X: o) C) l0 A% y3 m
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
5 P/ i7 l- J+ X, g$ C. v- @6 W2 {下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
9 _4 L8 t7 Q2 F6 k6 c - cnpm install
( E! O9 T7 V# L0 Z/ s( a: G" f - ' n) i& v, h, K0 T
- # 启动应用,地址为 localhost:8080
( o2 K5 N! A2 [4 Z& o' n6 I - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:9 c# _( w: L+ O/ K: P$ O# G
: E$ y8 ]- w( p7 y3 \6 N8 _/ }! i7 }2 j" G! o
: B3 U% K* i* p. b4 i
4 D1 {1 F# ~3 l8 D$ o% ?+ _( C! G; U: U6 H* w& U: K; @/ X- ]
- S9 ]" @, U' X% F! A
/ e q) d! ?4 l0 B( ?# l1 x$ W, z" O, y8 Y4 }9 V
: s8 K* J7 L1 L' x
$ v: x" w+ y) _& @* P0 n- S. ~# g$ p$ w4 K& V7 N4 X, \- t6 o
|