Vue.js 路由

admin

本章节我们将为大家介绍 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

复制代码

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0

& \& u/ H% S* J1 mNPM

推荐使用淘宝镜像：

1. cnpm install vue-router

复制代码

简单实例

Vue.js + vue-router 可以很简单的实现单页应用。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

HTML 代码
6 p$ U" S+ g* \; o

1. <script src="https://unpkg.com/vue/dist/vue.js"></script>
     Z  P( x  ^8 m' L
2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   ) ]9 p1 R* V: e+ J5 R# a$ v6 f
3. 
   
4. <div id="app">
   ) R; l( W3 V) V- n4 C
5.   <h1>Hello App!</h1>
   % t! ]# ~# R; O3 y8 G
6.   <p>
   
7.     <!-- 使用 router-link 组件来导航. -->
   4 o& Y5 L2 N6 x6 {; A
8.     <!-- 通过传入 `to` 属性指定链接. -->
   " I0 Z: D9 J- c( t3 p# d
9.     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
   
10.     <router-link to="/foo">Go to Foo</router-link>
    7 ?1 ]. g* H- t
11.     <router-link to="/bar">Go to Bar</router-link>
    
12.   </p>
    5 y8 j: @( }/ K$ J
13.   <!-- 路由出口 -->
    - [" n6 [' b& h- ]
14.   <!-- 路由匹配到的组件将渲染在这里 -->
    & u$ C% `  X1 x; n. t
15.   <router-view></router-view>
    
16. </div>

复制代码

JavaScript 代码

1. // 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 Vue.use(VueRouter)
   0 Z  O' p$ X$ _
2. 
   
3. // 1. 定义（路由）组件。
   
4. // 可以从其他文件 import 进来
   
5. const Foo = { template: '<div>foo</div>' }
   
6. const Bar = { template: '<div>bar</div>' }
     w5 A0 [% m3 g. X3 {
7. 
   
8. // 2. 定义路由
   ; n$ s' w+ X" w1 v* o/ K, x: a$ w" y
9. // 每个路由应该映射一个组件。 其中"component" 可以是
   7 L' _% C; h2 R" H3 m; C9 ?
10. // 通过 Vue.extend() 创建的组件构造器，
    ; x: W  ~6 S. X2 Y; E8 a% t, q5 H1 }
11. // 或者，只是一个组件配置对象。
    
12. // 我们晚点再讨论嵌套路由。
    ( A9 |, ], \/ z1 f6 w2 l
13. const routes = [
    1 O6 u, A6 g" `1 f3 A  y' D+ P, T
14.   { path: '/foo', component: Foo },
    
15.   { path: '/bar', component: Bar }
    
16. ]
    + l! S3 c2 H/ ?3 @: j
17. 
    & L% P8 ~& t' }
18. // 3. 创建 router 实例，然后传 `routes` 配置
    5 \3 f6 V  m( Y
19. // 你还可以传别的配置参数, 不过先这么简单着吧。
    # ]7 R$ h( d0 h# Z1 d; ?! u$ `
20. const router = new VueRouter({
    
21.   routes // （缩写）相当于 routes: routes
    . O0 c) ~2 ~0 y9 o
22. })
    
23. 
    
24. // 4. 创建和挂载根实例。
    5 j/ m8 R4 H- w9 b6 B/ U4 Q; |
25. // 记得要通过 router 配置参数注入路由，
    
26. // 从而让整个应用都有路由功能
    , H. f, o- O! a( {: |' d
27. const app = new Vue({
    " Q6 a# b* s% [1 k$ Z
28.   router
    
29. }).$mount('#app')
    
30. 
    
31. // 现在，应用已经启动了！

复制代码

NPM 路由实例

接下来我们演示了一个使用 npm 简单的路由实例，开始前，请先下载该实例源代码：

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0

( ]0 ]7 d7 P4 @3 E0 U* c: J* t

你也可以在 Github 上下载：https://github.com/chrisvfritz/vue-2.0-simple-routing-example

下载完后，解压该目录，重命名目录为 vue-demo，vu 并进入该目录，执行以下命令：

1. # 安装依赖，使用淘宝资源命令 cnpm
   
2. cnpm install
   # G( @+ j+ P8 h- g, K3 \
3. 
   
4. # 启动应用，地址为 localhost:8080
   
5. cnpm run dev

复制代码

如果你需要发布到正式环境可以执行以下命令：
3 U9 {7 E8 ~5 r; K  s) Y0 d

1. cnpm run build

复制代码

2 E1 A6 X$ s& f- K
1 D3 s* g5 D8 K' }
6 A9 `7 ]7 _! v7 v; X4 |2 _1 I
; i7 ~8 @* o8 s, O
# G, J  H  _) N- j, ]


. x" N. n& b" ]  E+ k
$ ?& C- M% c' }" Y
9 q, ^/ f% \+ ^/ a9 l