您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 12386|回复: 0
打印 上一主题 下一主题

[Vue.js] Vue.js 路由

[复制链接]
跳转到指定楼层
楼主
发表于 2018-7-4 11:44:03 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本章节我们将为大家介绍 Vue.js 路由。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。
Vue.js 路由需要载入 vue-router 库
中文文档地址:vue-router文档

安装1、直接下载 / CDN
  1. https://unpkg.com/vue-router/dist/vue-router.js
复制代码

! v; e$ Y# \( ?, r7 ^' {
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
- c4 A" D- N; W9 w3 {5 T
NPM
推荐使用淘宝镜像:
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:
HTML 代码3 K9 f/ N$ [' S. R, D
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>& L' Y( k; o1 {, A( R( ?
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    ) T( U' g! z; E* ^0 t

  3. + h4 H: t. V$ V9 ^- P
  4. <div id="app">
    ( e/ U+ N: G) p6 q
  5.   <h1>Hello App!</h1>
    4 S2 @" ?1 f: \, M
  6.   <p>
    ) q7 O  Q0 D9 e- {7 w
  7.     <!-- 使用 router-link 组件来导航. -->* r9 w3 n6 {( A! W$ D( e
  8.     <!-- 通过传入 `to` 属性指定链接. -->
    6 O( F5 q. f, Z- Y- i/ w7 }% y* m& ]
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      M/ Z4 Z8 u* H$ O" I
  10.     <router-link to="/foo">Go to Foo</router-link>! F4 F8 H0 Q7 q# o+ y# t. _7 k
  11.     <router-link to="/bar">Go to Bar</router-link>7 r$ U. j$ m6 c
  12.   </p>: p2 f" b- R( C1 E$ l, c3 P
  13.   <!-- 路由出口 -->9 _3 P+ ?$ `/ `! R
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    9 s& e) h3 Q1 S2 c* w7 G- X
  15.   <router-view></router-view>" r: F# b# ?/ ^& {
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
    ( b+ D. V( |" S; E/ F. Z! e

  2. 9 A  {$ O9 |1 _5 F# ^5 o9 D
  3. // 1. 定义(路由)组件。
    ( X) K% _, R5 @9 a! r. m
  4. // 可以从其他文件 import 进来% N8 e3 [# M0 Y4 `; U9 A+ }
  5. const Foo = { template: '<div>foo</div>' }4 J4 ^2 H' D0 S/ O# h1 s# |0 d+ R
  6. const Bar = { template: '<div>bar</div>' }* S% P3 J$ f3 b, Z

  7. 8 y" b1 F# T- w+ k% J% y! O* a
  8. // 2. 定义路由
    0 r1 q. ^' E5 @$ i" \9 k6 N
  9. // 每个路由应该映射一个组件。 其中"component" 可以是
    " ]5 d  }% l6 f4 R3 j' h& C, d
  10. // 通过 Vue.extend() 创建的组件构造器,
      v" S; ]; G& n" m( ]
  11. // 或者,只是一个组件配置对象。
    6 {' w$ G: {" |& W; e9 r5 e
  12. // 我们晚点再讨论嵌套路由。2 h5 x8 ?+ [0 X, Z# |
  13. const routes = [
    * f4 t8 x% J1 D5 P: [* \7 D; s
  14.   { path: '/foo', component: Foo },
    . j& `9 \1 i# `
  15.   { path: '/bar', component: Bar }
    + O* ^- e- W& U4 p
  16. ]5 q7 t! }. U- N

  17. 7 V' b3 k( m: {) d1 f
  18. // 3. 创建 router 实例,然后传 `routes` 配置7 K& m$ V$ q3 y& C
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。! d* t+ K  b$ m6 o& u
  20. const router = new VueRouter({
    ) t! J6 O9 k% O0 w
  21.   routes // (缩写)相当于 routes: routes
    4 N& O* _! o) ]$ ?4 _
  22. })5 Z  I& f; d% X% Z0 [6 p* C* V3 Y
  23. % C6 ~4 E# z- z8 g6 E6 j
  24. // 4. 创建和挂载根实例。) m. l7 s3 [0 M2 ]+ F$ T. [
  25. // 记得要通过 router 配置参数注入路由,
    ! q) t4 o$ Y$ e" N; {
  26. // 从而让整个应用都有路由功能7 h- E, g, `& I0 c; T. R
  27. const app = new Vue({2 `! C: O& k7 w; s2 Y( f) a: ~
  28.   router
    ( ~3 j( i' ]! n  [! \8 U
  29. }).$mount('#app')
    ' \# g' d" e! B
  30. & m* T' y* [% E" W. S- c
  31. // 现在,应用已经启动了!
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码:
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
1 l" M7 J) V, p! K3 |
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令:
  1. # 安装依赖,使用淘宝资源命令 cnpm
    1 e+ `2 R7 H& {& J& l
  2. cnpm install/ m1 x2 z5 P: r* C# ?; }

  3. 7 R. \+ \+ s. p! P  S: K) \, o
  4. # 启动应用,地址为 localhost:80803 Q7 O2 |0 Q0 L7 C" G2 _
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令:3 S) u* J$ H, E4 I( Y# h3 R. _- D
  1. cnpm run build
复制代码

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
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-22 11:13 , Processed in 0.111635 second(s), 22 queries .

Copyright © 2001-2024 Powered by cncml! X3.2. Theme By cncml!