首页 > 编程笔记 > JavaScript笔记

Vue Router的安装和使用

在前端项目中，当某个事件发生时，需要显示 Vue.js 实例下的另外一个组件。在 Vue.js 中，需要使用 Vue Router 进行导向和控制。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，方便前端开发人员简单快捷地构建单页面应用。

Vue Router 主要有以下几个功能：

安装Vue Router

在使用 Vue Router 之前，需先安装 Vue Router。有 3 种方式可以安装 Vue Router。

1) 直接下载/CDN

unpkg.com 提供了基于 NPM 的 CDN 链接。https://unpkg.com/vue-router/dist/vue-router.js 链接会一直指向在 NPM 发布的最新版本。开发者也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定版本号或者 Tag。

开发人员可以使用 script 元素，引用 Vue.js 和 vue-router.js 安装使用 router，代码如下： 
<script src="...Vue.js"></script>
<script src="...router.js"></script>
当然也可以通过访问 https://unpkg.com/vue-router/dist/vue-router.js 链接，将里面的内容保存到本地的一个 JS 文件中，再在页面中基于 script 元素引入 JS 文件。

2) NPM安装

在模块化工程中，可以使用npm install vue-router命令安装 Vue Router，然后用 Vue.use() 注册全局路由，一般在模块化工程的 main.js 文件中注册，代码如下： 
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

3) Vue CLI脚手架安装

在使用 Vue CLI 脚手架的项目时，可以执行 vue add router 命令，以项目插件的形式添加 Vue Router。

CLI 可以生成上述代码及两个示例路由。它也会覆盖 App.vue，因此需要确保在项目中运行 vue add router 命令之前备份 App.vue 文件。

4) 构建开发版

如果开发人员想使用最新的开发版，则可以从 GitHub 上直接克隆，然后按如下的命令构建一个最新的 Vue-Router。 
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

第1个路由

用 Vue.js+Vue Router 创建单页应用非常简单。通过前面的介绍，开发人员可以组合组件来组成应用程序，如果要把 Vue Router 添加进来，则开发人员需要做的是将组件（Components）映射到路由（Routes），然后告诉 Vue Router 在哪里渲染它们。

接下来通过一个案例介绍 Vue.js+Vue Router 的简单使用。

创建 html，使用 <router-view> 元素制定组件的渲染位置，使用 <router-link> 元素制定组件的导航，代码如下： 
...
<script src="../static/js/Vue.js" type="text/JavaScript"></script>
<script src="./static/js/vue-router.js" type="text/JavaScript"></script>
...
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航。 -->
    <!-- 通过传入 to 属性指定链接 -->
    <!-- <router-link>默认会被渲染成一个 <a> 标签 -->
    <router-link to="/foo">GotoFoo</router-link>
    <router-link to="/bar">GotoBar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 由路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

在第 1 个路由 .html 文件中，添加 JavaScript 脚本，在 Vue.js 对象中引入 Router 对象，基于 Router 实现 Vue.js 中组件的路由导航，代码如下： 
...
<script>
// 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 vm = new Vue({
  el: '#app',
  router, // 通过注入路由器，可以在任何组件内通过 this.$router 访问路由器
  computed: {
    username() {
      // 很快就会看到 ‘params’ 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
})
</script>
...
通过注入路由器，开发人员可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$router 访问当前路由。其实 this.$router 和 router 使用起来完全一样。这里使用 this.$router 的原因是不想在每个需要独立封装路由的组件中都导入路由。

需要注意，当 <router-link> 对应的路由匹配成功时，将自动设置 class 属性值 .routerlink-active。

相关文章