本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码
" F4 G7 i' W. W4 l游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
. ]2 m4 B- H1 n* K6 i& ?8 X- tNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码, ~9 t& K/ t) p$ u
- <script src="https://unpkg.com/vue/dist/vue.js"></script>; A7 P8 e! I: s
- <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> c8 ^# E7 q$ c- w, V [" ]
-
) C/ F' ^* i7 b) y2 W0 @5 w - <div id="app">
+ Q- D* [8 I- H+ W# h) e; B - <h1>Hello App!</h1>
. @5 G1 q8 r2 o' K - <p>
% @: m3 |1 ~. ?1 D a - <!-- 使用 router-link 组件来导航. -->; z2 L2 T1 j! o; u9 f! T* \
- <!-- 通过传入 `to` 属性指定链接. -->0 N$ a% [' k- W) h/ d |
- <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
0 f% E, i9 O' L. L# h5 y5 W - <router-link to="/foo">Go to Foo</router-link>
4 F' v& Z N: ^ - <router-link to="/bar">Go to Bar</router-link>
' |0 d$ r: b; C" m. @- g* y' L - </p>7 r. e( l" U; P x% X% }- r* X. l
- <!-- 路由出口 -->) a: X! V- q. w7 g7 d [0 Y# R
- <!-- 路由匹配到的组件将渲染在这里 -->' g- g0 k8 ? T; g$ _% g
- <router-view></router-view>
1 J8 A) I# Z$ X2 j% [ - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter) [6 Q1 m: `* E6 a m% h
-
; E0 M# K. t8 I/ j# {- L, s - // 1. 定义(路由)组件。/ N* U/ X9 v, |2 T+ [
- // 可以从其他文件 import 进来
- J5 u9 W- C' @# c1 w% ~ - const Foo = { template: '<div>foo</div>' }
" d' f/ D8 x B7 U" y4 G - const Bar = { template: '<div>bar</div>' }( j+ ]- U* ?3 U0 q7 H
- ' o$ }: X, _5 A- \ z: H1 E
- // 2. 定义路由
( F8 G( a9 J! t! ^' }# g( d - // 每个路由应该映射一个组件。 其中"component" 可以是
$ O) q. l X3 A) h0 Y6 J - // 通过 Vue.extend() 创建的组件构造器,7 S0 \" o6 Q2 [# t3 {) |
- // 或者,只是一个组件配置对象。+ ~, t3 ^( p% z3 S W9 L2 z
- // 我们晚点再讨论嵌套路由。 }2 f5 b# | h$ I& M, c! X6 V" s
- const routes = [
# @- ]( ^% q* H3 l - { path: '/foo', component: Foo }, N8 r& O& a( q) Q; O5 W3 a
- { path: '/bar', component: Bar }
& e% F w5 s K; w: |& w) ^ - ]
2 F& O" p% ?# R5 n7 M5 m" D - 2 _# r5 [( N% ^- S3 b1 p& D$ ]
- // 3. 创建 router 实例,然后传 `routes` 配置
" ?( j$ x( x7 ~4 o( K, V5 p2 g - // 你还可以传别的配置参数, 不过先这么简单着吧。
4 `2 R6 k! E) k' @& M - const router = new VueRouter({! T) B4 Q. e. D" J4 R' T2 a6 d
- routes // (缩写)相当于 routes: routes8 W5 Z9 a; z5 \& K0 H8 [5 ?
- })7 R* D# H3 p) {( H& _5 x
- ( P9 O/ i, R# O' |( I9 r7 w
- // 4. 创建和挂载根实例。5 c0 J0 \9 I- W- V: v& d+ f
- // 记得要通过 router 配置参数注入路由,% |! Q; ^1 l4 x* Z
- // 从而让整个应用都有路由功能
. q! R+ W) a" K/ Z - const app = new Vue({
2 k: [: L+ F% \' I7 a: z - router- [5 ?+ P ^# j; v8 ?
- }).$mount('#app')! R; p8 n1 k: S+ f& `
- # c0 X4 b/ x7 u- N) d3 T
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 & @; ?. N+ c T; N7 u* A& Q
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
# ]! x$ v K4 F. z - cnpm install
5 C9 L. n" x6 n: R8 S% o' R - - h X- a) [, ]2 C/ B1 @
- # 启动应用,地址为 localhost:8080
, r. w' q3 j) `( \ - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
+ _' x1 W1 C3 }6 s+ j& y% ^8 G L' }& F7 p
6 X- j' z1 _* L+ S' \
' V* p+ U2 a: K m, ]& B* T* j2 Z- s9 I2 ~$ p8 `3 y
% c0 h+ O/ H$ v ]4 k# A7 e
& X6 G a+ ?1 c# {& s* ~9 z9 z; X+ _, d: o6 Q+ P
d' Z5 a$ k8 g4 N6 S" q
; k. N! X4 r& T3 J7 k/ ], X3 p2 s- Y1 h- k1 d# K) N7 Y& @
. x" b/ P2 O2 U7 n! b |