5.vue-router快速入门

1.vue router介绍

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

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

2.API

2.1 准备工作

通过脚手架创建一个工程

在src下创建router/index.js

import Vue from 'vue';
import VueRouter from "vue-router";

Vue.use(VueRouter)
// 路由表
const routes = []

const router = new VueRouter({routes})

export default router

在main.js中修改

2.2 简单使用

在components下创建bar/index.vue

<template>
  <div>
    <h1>hello bar</h1>
  </div>
</template>

在components下创建foo/index.vue

<template>
  <div>
    <h1>hello foo</h1>
  </div>
</template>

配置路由表router/index.js

// 路由表
const routes = [
  {
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

修改App.vue代码

<template>
  <div id="app">
    <h1>hello iweb</h1>
    <hr>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <p>
      <router-link to="/foo">to foo</router-link>
      |
      <router-link to="/bar">to bar</router-link>
    </p>
    <hr>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

测试：

2.3 动态路由

我们可以通过 path: '/bar/:username'的配置实现动态路由，匹配/bar/admin，通过$route.params.username获取参数的值admin
修改路由表

修改bar/index.vue

修改App.vue

测试：

2.4 嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：

在foo下创建pro/index.vue

<template>
  <div>
    <h1>posts</h1>
  </div>
</template>

在foo下创建posts/index.vue

<template>
  <div>
    <h1>pro</h1>
  </div>
</template>

在foo/index.vue中修改

在router/index.js中修改

测试1

测试2

2.5 命名路由

路由也可以通过name来导航
修改路由表

在App.vue增加请求

测试

2.6 路由传参

在App.vue增加


测试