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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 17156|回复: 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
复制代码
, O, j& d& M5 u3 R
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0

4 y, }4 j4 H9 o! d! ZNPM
推荐使用淘宝镜像:
  1. cnpm install vue-router
复制代码
简单实例
Vue.js + vue-router 可以很简单的实现单页应用。
以下实例中我们将 vue-router 加进来,然后配置组件和路由映射,再告诉 vue-router 在哪里渲染它们。代码如下所示:
HTML 代码
" f+ \3 [/ N+ P0 k$ `
  1. <script src="https://unpkg.com/vue/dist/vue.js"></script>7 ]! g$ y4 q5 {- @1 s( O6 N
  2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>1 |/ f2 F* e. z! y- _6 U- g

  3. " i2 Y$ R4 X3 ~" U
  4. <div id="app">
    : R% X7 D8 g, P
  5.   <h1>Hello App!</h1>& i7 E+ w5 m9 [+ ~8 m  M* r
  6.   <p>% b- v/ B2 }3 s: f
  7.     <!-- 使用 router-link 组件来导航. -->
    $ v* t9 n* L, H- q% R7 B) L2 k
  8.     <!-- 通过传入 `to` 属性指定链接. -->0 K: [, y* C& P  [
  9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    ! u0 t$ R% s2 A2 f+ U
  10.     <router-link to="/foo">Go to Foo</router-link>
    3 e  M4 J) |2 y# w, x
  11.     <router-link to="/bar">Go to Bar</router-link>
    - }: o2 h, t5 X8 o5 @
  12.   </p>
    : \- R; j9 P! T3 O; W3 r! a
  13.   <!-- 路由出口 -->+ g* z' k, o0 T# k' G8 L
  14.   <!-- 路由匹配到的组件将渲染在这里 -->
    * U2 i1 |  f; G9 f
  15.   <router-view></router-view>
    ) N1 G7 H- |& i* x* _8 ~
  16. </div>
复制代码
JavaScript 代码
  1. // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)/ P* r% t% D9 l* b: L' l5 J

  2. ' S' A! s8 L" K5 Q0 q
  3. // 1. 定义(路由)组件。
    ; @8 ?. G4 {- i. T, E
  4. // 可以从其他文件 import 进来
    : y! R, p( G( Y+ I
  5. const Foo = { template: '<div>foo</div>' }
    # u1 o" F- M% [
  6. const Bar = { template: '<div>bar</div>' }
    : R/ F4 \8 y" K/ k7 S

  7. & x' O. r8 b8 I9 y
  8. // 2. 定义路由: j% b. j0 H0 P- o5 A8 W3 K$ ?
  9. // 每个路由应该映射一个组件。 其中"component" 可以是- i' p2 X- }) `2 {2 k% e+ @8 j
  10. // 通过 Vue.extend() 创建的组件构造器,
    1 t; ^( g8 f2 ^3 E- R. b
  11. // 或者,只是一个组件配置对象。% u; S. W& O4 J6 E+ Q' _+ P- ~, ~
  12. // 我们晚点再讨论嵌套路由。
    4 r  w9 N; v8 m1 m* @
  13. const routes = [* g1 X! b0 \' S' v! b3 _. S1 G4 v
  14.   { path: '/foo', component: Foo },$ r/ v& o, T( u) h' w& y$ L
  15.   { path: '/bar', component: Bar }
    ) U! R$ n0 A* p5 N, C
  16. ]
      G" U/ K/ E! u+ w- j

  17. # K1 O% G8 A$ g
  18. // 3. 创建 router 实例,然后传 `routes` 配置
    - Z' C. j, @8 s0 i% }
  19. // 你还可以传别的配置参数, 不过先这么简单着吧。' [- a/ P/ @% E, h
  20. const router = new VueRouter({: q8 i" B$ d  K4 G
  21.   routes // (缩写)相当于 routes: routes
      x& k2 B' z# w# g; ~
  22. })% j4 y, A1 D) p

  23. : E& ^, k3 T+ e1 J+ c
  24. // 4. 创建和挂载根实例。+ j! Q' _8 u5 J5 T! T, s
  25. // 记得要通过 router 配置参数注入路由,( Y1 h' i+ s& H0 g! e
  26. // 从而让整个应用都有路由功能+ [0 J7 l' Q) h: x0 S6 i
  27. const app = new Vue({- l& A( A/ K$ L' b
  28.   router0 b' U( t5 x+ g/ |+ ?4 i
  29. }).$mount('#app')
    4 \( }# n# s4 l2 x% a5 [- p

  30. 1 `" o4 M& O- [, @8 N3 n
  31. // 现在,应用已经启动了!
复制代码
NPM 路由实例
接下来我们演示了一个使用 npm 简单的路由实例,开始前,请先下载该实例源代码:
游客,本帖隐藏的内容需要积分高于 1 才可浏览,您当前积分为 0
: n% y" ^9 E* j  S+ ^* t3 c8 B
下载完后,解压该目录,重命名目录为 vue-demo,vu 并进入该目录,执行以下命令:
  1. # 安装依赖,使用淘宝资源命令 cnpm) U9 T3 T7 i2 m) X
  2. cnpm install
    & g$ @" x" m8 D( ]

  3. 7 w/ m9 o, s& g: L" w! C
  4. # 启动应用,地址为 localhost:8080
    * G- q' y( ^0 B' R8 \! J
  5. cnpm run dev
复制代码
如果你需要发布到正式环境可以执行以下命令:
$ I" E9 d  \9 U$ p
  1. cnpm run build
复制代码

0 ?+ N1 m+ j; n% X) V. B7 q. I0 S# O, k# N# W
/ o& {/ z, [2 u" s) \8 O$ L1 _( f
' r1 c% a- H" W9 `0 @* w/ Y, K
  }0 R5 ]  |$ H

6 Q. E' R% O/ K% ~! _
( h. |, Z* N+ a/ t% B$ P6 H0 @0 }9 a5 d% Q. e, Q5 R$ c" M/ w
1 L* E0 o! O: A& @+ N4 K
4 k' }+ f3 `8 i" d/ L( M  w
) j( T8 w1 q: }
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-9-21 03:16 , Processed in 0.057791 second(s), 22 queries .

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