什么是vue Router？

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

vue Router包含的功能有哪些？

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

vue Router安装方法：

npm install vue-router

两种引入路由组件的方式

第一种
import Singer from './../views/singer.vue'
{
    path: '/',
    component：Singer
}
第二种
{
    path: '/index',
    component: () => import('./../views/index.vue')
}

重定向

把当前访问的路径，重定向到另一个位置重定向也是通过 routes 配置来完成，下面例子是从 /main 重定向到 /home：

const router = new VueRouter({
  routes: [
    { path: '/main', redirect: '/home' }
  ]
})

重定向的目标也可以是一个命名的路由:

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

重定向的目标甚至可以是一个方法，动态返回重定向目标：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 方法接收 目标路由 作为参数
      // return 重定向的 字符串路径/路径对象
    }}
  ]
})

命名路由与别名

{
    path: '/',
    name: "home",      // 命名路由
    alias: 'home_page', // 别名，指的是home_page和home这两个名字指向的是同一个页面
    component: Home,
  },

动态路由

定义动态路由

{
    path: '/argu/:name',  // 动态路由
    name: 'argu',        // 命名路由
    component: ()=>import('@/views/Argu.vue'),
  }

获取动态路由的参数

{{ $route.params.name }}
$route：当前加载页面的路由对象

嵌套路由

{
    path: '/parent',
    name: 'parent',
    component: ()=> import('@/views/Parent.vue'),
    children: [
      {
        <!-- 第一个子路由 -->
        path: 'child1',
        component: () => import("@/views/Child1.vue")
      },
      {
        <!-- 第二个子路由 -->
        path: 'child2',
        component: () => import("@/views/Child2.vue")
      }
    ]
  }
  http://localhost:8080/#/parent/child1
  http://localhost:8080/#/parent/child2

命名视图

有时候想展示多个视图，而不是嵌套展示,例如创建一个布局，有 email 和 tel 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<!-- 默认的是default -->
<router-view ></router-view >
<router-view name="email"></router-view >
<router-view name="tel"/></router-view >
{
  // 命名视图
  path: '/named_view',
  // 这里有s，代表多个组件
  components: {
    default: () => import("@/views/Child.vue"),
    email: () => import("@/views/Email.vue"),
    tel: ()=> import("@/views/Tel.vue")
  }
}

路由如何展示到页面上

<!-- 路径方式 -->
<router-link to="/">Home</router-link>
<!-- 命名路由的方法，此方法必须给路由命名 -->
<router-link :to="{ name: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ name: 'about' }">About</router-link>
<router-link :to="about">About</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

编程式的导航

js操作路由

1、返回上一页

第一种方式
this.$router.back();
第二种方式
this.$router.go(-1);

2、前进一页

this.$router.go(1)

3、跳转到某个页面

方法一：路径方法
this.$router.push("/parent")
方法二：命名路由的方法
this.$router.push({
    name: 'parent'
})
// 也可以在参数中添加一些信息
this.$router.push({
  // 参数（查询信息）
  name: "parent",
  query: {
    name: 'music'
  }
  // 或者
  // 参数
  name: 'argu',
  params: {
    name: "music"
  }
  // 或者（ES6的模板语法）
  path: `/argu/${name}`
})

4、替换到某个路由

this.$router.replace({name:"parent"})

跳转与替换的区别：
replace：
当使用push时，会在浏览历史留下记录
replace的话，浏览历史会被替换，不会留下以前的记录。
暂时先到这里，后面再更新吧。