本章节我们将为大家介绍 Vue.js 路由。 Vue.js 路由允许我们通过不同的 URL 访问不同的内容。 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。 安装1、直接下载 / CDN- https://unpkg.com/vue-router/dist/vue-router.js
复制代码 . D! C% S7 Z# m" M$ q
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
1 f8 C0 j3 `) C# J7 W2 dNPM推荐使用淘宝镜像: 简单实例Vue.js + vue-router 可以很简单的实现单页应用。 以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示: HTML 代码. j' G x$ s' `6 h+ |! f. M7 [
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
7 t% b0 [* A1 u4 a: A7 i - <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
$ k, ?! N5 g2 v5 R+ a - % ~$ a# P& r1 \/ }$ k( b
- <div id="app">
$ g# T7 P7 ?5 \" ~) H- J - <h1>Hello App!</h1>
( G" f6 w; [* G* S1 ?6 k* F - <p>$ c7 x; o! `; W0 m# _
- <!-- 使用 router-link 组件来导航. -->
. n: |$ F$ j8 D, w+ Z - <!-- 通过传入 `to` 属性指定链接. -->
2 A. @2 F, F$ a6 R0 @, E - <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->! Z' _+ I; y4 S# `
- <router-link to="/foo">Go to Foo</router-link>& p2 }% a$ H) n6 b3 u! y3 F
- <router-link to="/bar">Go to Bar</router-link>1 k8 T! G8 G. R* a
- </p>$ S+ J" |* r# D9 X1 |4 C5 I, d) b
- <!-- 路由出口 -->
. F& z1 O( ~, d - <!-- 路由匹配到的组件将渲染在这里 -->
+ e; s- f) h4 x - <router-view></router-view>
8 x% V% N. m: |5 R1 [' T$ e - </div>
复制代码 JavaScript 代码- // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
7 R6 L: s7 \" l" t- U( ^ - / @' k5 k8 K! r- ^
- // 1. 定义(路由)组件。
1 i7 }2 w: o4 E( j0 z1 |) m) [0 t - // 可以从其他文件 import 进来0 x' j8 \+ h0 K
- const Foo = { template: '<div>foo</div>' } m s8 b$ B- H1 x" X' ^: N* ^
- const Bar = { template: '<div>bar</div>' }
# d! A. Q- O7 B' R - 5 V s& b9 x0 N) Z. V9 ]6 c. t
- // 2. 定义路由
2 { r3 [ {3 O0 I - // 每个路由应该映射一个组件。 其中"component" 可以是/ ]6 x7 I; X5 p% Z
- // 通过 Vue.extend() 创建的组件构造器,
4 [- m& `4 A/ d+ Q! E5 b - // 或者,只是一个组件配置对象。) e* m2 G' E# {0 ?! N
- // 我们晚点再讨论嵌套路由。% n. j4 k: ~/ C Q3 A5 U: E8 Q
- const routes = [
* g8 ^5 r- u& `8 P1 q' l" Q - { path: '/foo', component: Foo },
$ k1 R2 w. C* w. V- W# ^8 G) w3 E - { path: '/bar', component: Bar } C; ]# [) I0 }% d2 V; t# v
- ]$ w2 o7 W) h5 |1 j! {4 m
-
4 T" N7 z) k+ K( N - // 3. 创建 router 实例,然后传 `routes` 配置
1 }0 a# U3 I/ U, a) i, J - // 你还可以传别的配置参数, 不过先这么简单着吧。( Y# p# b6 N# A9 }
- const router = new VueRouter({, x- r7 W# V, y, y- s; e0 h
- routes // (缩写)相当于 routes: routes& O0 D. r# Z* G$ n% j( H
- })" P$ N$ ^! g$ @( p' u0 P
- 5 e( n1 U# }5 ^* e
- // 4. 创建和挂载根实例。
/ I$ z8 B& K$ E" a- m3 o+ M - // 记得要通过 router 配置参数注入路由,6 y g2 D+ P; r1 C" Q
- // 从而让整个应用都有路由功能
+ h" M6 f, n4 a. v! _ - const app = new Vue({- T" L7 a& z2 P( S- X
- router
7 ~$ V% p/ @. \ - }).$mount('#app')
: x. B" T& [' w5 p - 0 O" z+ N+ R( X" F9 f7 O
- // 现在,应用已经启动了!
复制代码 NPM 路由实例接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码: 游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0 9 c: w% j; [5 f3 ^
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令: - # 安装依赖,使用淘宝资源命令 cnpm
$ W. | o7 M7 k - cnpm install# v7 d) l% y/ v3 O/ C
$ A+ k5 m7 }3 P' X5 `- # 启动应用,地址为 localhost:8080
2 ]+ f4 K8 \4 u3 c - cnpm run dev
复制代码 如果你需要发布到正式环境可以执行以下命令:
9 J+ Z! Z0 D- j% ^6 L' _6 u; a4 N/ e' B5 q1 j. h! e
( ? V* F* F, E/ l* k2 q
7 J/ I5 E/ }$ F' z* l, e
, y* g2 ]) w7 w! ~, B& y
$ B1 R) z: S2 b5 g! r8 x7 m4 o5 r7 a2 ~
- [3 ^. ~, f" q0 b
- |7 M( Z5 y3 Q- |' O1 F5 O v5 M0 \8 r5 S
9 P8 j! V: p) D5 x
9 C: e9 _6 O- [( T- S, T: q; n( e2 {) s% h/ G
|