本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
! v; e$ Y# \( ?, r7 ^' {游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 - c4 A" D- N; W9 w3 {5 T
NPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码3 K9 f/ N$ [' S. R, D
- <script src="https://unpkg.com/vue/dist/vue.js"></script>& L' Y( k; o1 {, A( R( ?
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
) T( U' g! z; E* ^0 t -
+ h4 H: t. V$ V9 ^- P - <div id="app">
( e/ U+ N: G) p6 q - <h1>Hello App!</h1>
4 S2 @" ?1 f: \, M - <p>
) q7 O Q0 D9 e- {7 w - <!-- 使用 router-link 组件来导航. -->* r9 w3 n6 {( A! W$ D( e
- <!-- 通过传入 `to` 属性指定链接. -->
6 O( F5 q. f, Z- Y- i/ w7 }% y* m& ] - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
M/ Z4 Z8 u* H$ O" I - <router-link to="/foo">Go to Foo</router-link>! F4 F8 H0 Q7 q# o+ y# t. _7 k
- <router-link to="/bar">Go to Bar</router-link>7 r$ U. j$ m6 c
- </p>: p2 f" b- R( C1 E$ l, c3 P
- <!-- 路由出口 -->9 _3 P+ ?$ `/ `! R
- <!-- 路由匹配到的组件将渲染在这里 -->
9 s& e) h3 Q1 S2 c* w7 G- X - <router-view></router-view>" r: F# b# ?/ ^& {
- </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
( b+ D. V( |" S; E/ F. Z! e -
9 A {$ O9 |1 _5 F# ^5 o9 D - // 1. 定义(路由)组件。
( X) K% _, R5 @9 a! r. m - // 可以从其他文件 import 进来% N8 e3 [# M0 Y4 `; U9 A+ }
- const Foo = { template: '<div>foo</div>' }4 J4 ^2 H' D0 S/ O# h1 s# |0 d+ R
- const Bar = { template: '<div>bar</div>' }* S% P3 J$ f3 b, Z
-
8 y" b1 F# T- w+ k% J% y! O* a - // 2. 定义路由
0 r1 q. ^' E5 @$ i" \9 k6 N - // 每个路由应该映射一个组件。 其中"component" 可以是
" ]5 d }% l6 f4 R3 j' h& C, d - // 通过 Vue.extend() 创建的组件构造器,
v" S; ]; G& n" m( ] - // 或者,只是一个组件配置对象。
6 {' w$ G: {" |& W; e9 r5 e - // 我们晚点再讨论嵌套路由。2 h5 x8 ?+ [0 X, Z# |
- const routes = [
* f4 t8 x% J1 D5 P: [* \7 D; s - { path: '/foo', component: Foo },
. j& `9 \1 i# ` - { path: '/bar', component: Bar }
+ O* ^- e- W& U4 p - ]5 q7 t! }. U- N
-
7 V' b3 k( m: {) d1 f - // 3. 创建 router 实例,然后传 `routes` 配置7 K& m$ V$ q3 y& C
- // 你还可以传别的配置参数, 不过先这么简单着吧。! d* t+ K b$ m6 o& u
- const router = new VueRouter({
) t! J6 O9 k% O0 w - routes // (缩写)相当于 routes: routes
4 N& O* _! o) ]$ ?4 _ - })5 Z I& f; d% X% Z0 [6 p* C* V3 Y
- % C6 ~4 E# z- z8 g6 E6 j
- // 4. 创建和挂载根实例。) m. l7 s3 [0 M2 ]+ F$ T. [
- // 记得要通过 router 配置参数注入路由,
! q) t4 o$ Y$ e" N; { - // 从而让整个应用都有路由功能7 h- E, g, `& I0 c; T. R
- const app = new Vue({2 `! C: O& k7 w; s2 Y( f) a: ~
- router
( ~3 j( i' ]! n [! \8 U - }).$mount('#app')
' \# g' d" e! B - & m* T' y* [% E" W. S- c
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 1 l" M7 J) V, p! K3 |
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
1 e+ `2 R7 H& {& J& l - cnpm install/ m1 x2 z5 P: r* C# ?; }
7 R. \+ \+ s. p! P S: K) \, o- # 启动应用,地址为 localhost:80803 Q7 O2 |0 Q0 L7 C" G2 _
- cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:3 S) u* J$ H, E4 I( Y# h3 R. _- D
0 `7 U5 r/ t/ u
3 o1 K5 \! u5 j& t# T1 F$ Y) w' S: V( ^0 D0 Z7 `: V
4 M/ T* {9 A( A: {$ u( ^. Y/ h
a# ?% M5 K8 e9 a- j* h; h2 Q& }+ e
# g; n- @( V, _1 W% d
, r4 \+ D! a" ~; P: r
/ }) x1 q# V3 x; G2 Z- I# _- G& K1 d- m+ U
7 t6 E, f, i$ x: F! B/ _/ J: \( g* R! _5 W% W/ j' P D
|