Vue路由管理之Vue-router

作者：@skyflask
转载本文请注明出处：https://www.cnblogs.com/skyflask/p/10907421.html

---

目录

一、Vue Router介绍
二、Vue Router快速上手

一、Vue Router介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于 Vue.js 过渡系统的视图过渡效果

• 细粒度的导航控制

• 带有自动激活的 CSS class 的链接

• HTML5 历史模式或 hash 模式，在 IE9 中自动降级

• 自定义的滚动条行为

 

二、Vue Router快速上手

以下是官网的实例，非常简单：

HTML

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>   <div id="app">   <h1>Hello App!</h1>   <p>     <!-- 使用 router-link 组件来导航. -->     <!-- 通过传入 `to` 属性指定链接. -->     <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->     <router-link to="/foo">Go to Foo</router-link>     <router-link to="/bar">Go to Bar</router-link>   </p>   <!-- 路由出口 -->   <!-- 路由匹配到的组件将渲染在这里 -->   <router-view></router-view> </div>

 

　　

 

　　

JavaScript

?

1

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)   // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' }   // 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器， // 或者，只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [   { path: '/foo', component: Foo },   { path: '/bar', component: Bar } ]   // 3. 创建 router 实例，然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({   routes // (缩写) 相当于 routes: routes })   // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由， // 从而让整个应用都有路由功能 const app = new Vue({   router }).$mount('#app')   // 现在，应用已经启动了！

?

1

　　

?

1

　　

结果：