概述

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

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

安装

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令

  1. npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  4. Vue.use(VueRouter);

使用

以下案例在 vue-cli 项目中使用 vue-router

创建组件页面

创建一个名为 src/components 的目录专门放置我们开发的 Vue 组件，在 src/components 目录下创建一个名为 Content.vue 的组件，代码如下：

  1. <template>
  2.     <div>
  3.       我是内容页
  4.     </div>
  5. </template>
  7. <script>
  8.     export default {
  9.         name: "Content"
  10.     }
  11. </script>
  13. <style>
  14.   #app {
  15.     font-family: 'Avenir', Helvetica, Arial, sans-serif;
  16.     -webkit-font-smoothing: antialiased;
  17.     -moz-osx-font-smoothing: grayscale;
  18.     text-align: center;
  19.     color: #2c3e50;
  20.     margin-top: 60px;
  21.   }
  22. </style>

安装路由

创建一个名为 src/router 的目录专门放置我们的路由配置代码，在 src/router 目录下创建一个名为 index.js 路由配置文件，代码如下：

  1. import Vue from 'vue'
  2. // 导入路由插件
  3. import Router from 'vue-router'
  4. // 导入上面定义的组件
  5. import Content from '@/components/Content'
  7. // 安装路由
  8. Vue.use(Router);
  10. // 配置路由
  11. export default new Router({
  12.   routes: [
  13.     {
  14.       // 路由路径
  15.       path: '/content',
  16.       // 路由名称
  17.       name: 'Content',
  18.       // 跳转到组件
  19.       component: Content
  20.     }
  21.   ]
  22. });

配置路由

修改 main.js 入口文件，增加配置路由的相关代码

  1. import Vue from 'vue'
  2. import App from './App'
  3. // 导入上面创建的路由配置目录
  4. import router from './router'
  6. Vue.config.productionTip = false;
  8. new Vue({
  9.   el: '#app',
  10.   // 配置路由
  11.   router,
  12.   components: { App },
  13.   template: '<App/>'
  14. });

使用路由

修改 App.vue 组件，代码如下：

  1. <template>
  2.   <div id="app">
  3.     <router-link to="/">首页</router-link>
  4.     <router-link to="/content">内容</router-link>
  5.     <router-view></router-view>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   name: 'App'
  12. }
  13. </script>
  15. <style>
  16.   #app {
  17.     font-family: 'Avenir', Helvetica, Arial, sans-serif;
  18.     -webkit-font-smoothing: antialiased;
  19.     -moz-osx-font-smoothing: grayscale;
  20.     text-align: center;
  21.     color: #2c3e50;
  22.     margin-top: 60px;
  23.   }
  24. </style>

说明：

  • router-link： 默认会被渲染成一个 <a> 标签，to 属性为指定链接
  • router-view： 用于渲染路由匹配到的组件

vue-router - 图1