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

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>
   
2. <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
   
3. 
   " i2 Y$ R4 X3 ~" U
4. <div id="app">
   : R% X7 D8 g, P
5.   <h1>Hello App!</h1>
   
6.   <p>
   
7.     <!-- 使用 router-link 组件来导航. -->
   $ v* t9 n* L, H- q% R7 B) L2 k
8.     <!-- 通过传入 `to` 属性指定链接. -->
   
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.   <!-- 路由出口 -->
    
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)
   
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. 定义路由
   
9. // 每个路由应该映射一个组件。 其中"component" 可以是
   
10. // 通过 Vue.extend() 创建的组件构造器，
    1 t; ^( g8 f2 ^3 E- R. b
11. // 或者，只是一个组件配置对象。
    
12. // 我们晚点再讨论嵌套路由。
    4 r  w9 N; v8 m1 m* @
13. const routes = [
    
14.   { path: '/foo', component: Foo },
    
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. // 你还可以传别的配置参数, 不过先这么简单着吧。
    
20. const router = new VueRouter({
    
21.   routes // （缩写）相当于 routes: routes
      x& k2 B' z# w# g; ~
22. })
    
23. 
    : E& ^, k3 T+ e1 J+ c
24. // 4. 创建和挂载根实例。
    
25. // 记得要通过 router 配置参数注入路由，
    
26. // 从而让整个应用都有路由功能
    
27. const app = new Vue({
    
28.   router
    
29. }).$mount('#app')
    4 \( }# n# s4 l2 x% a5 [- p
30. 
    1 `" o4 M& O- [, @8 N3 n
31. // 现在，应用已经启动了！

复制代码

NPM 路由实例

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

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

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

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

1. # 安装依赖，使用淘宝资源命令 cnpm
   
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




6 Q. E' R% O/ K% ~! _
( h. |, Z* N+ a/ t% B$ P