定制链接类名，两类跳转传参，vue路由重定向，404，模式设置

router-link-exact-active 和 router -link-active两个类名都太长，可以在router路由对象中定制进行简化

// index.js

// 路由的使用步骤 5+2
//  1.下载 v3.6.5
// 2.引入
// 3.安装注册Vue.use(Vue插件)
// 4.创建路由对象
// 5.注入到new Vue中，建立关联

// 2个核心步骤
// 1.建组件(views目录)，配规则
// 2.准备导航链接，配置路由出口(匹配的组件所展示的位置)

import Find from '@/views/Find.vue'
import My from '@/views/My.vue'
import Friend from '../views/Friend.vue'

import Vue from 'vue' //原本在main.js中已经导入了vue，所以VueRouter初始化用到vue不报错，但是这里没有导入vue，插件初始化又用到了，所以需要先导入
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter({  //创建路由对象
  //routes 配置路由规则
  //route 一条路由规则就是一个对象 {path:路径，component:组件}
  routes: [
    { path: '/find', component: Find },
    { path: '/my', component: My },
    { path: '/friend', component: Friend },

  ],
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
})
export default router //因为路由对象要在main.js中使用，所以需要导出，导出路由对象

打开页面发现已经变成简化后的类名

声明式导航 - 跳转传参 （在跳转路由时，进行传值）

• 查询参数传参
  语法格式： to = '/path ? 参数名 = 值'
  对应页面组件接收传递过来的值 ： $route.query.参数名
   
• 动态路由传参  
  配置动态路由：routes:[...,{path:'/search/:words',component:Search}]
  配置导航链接：to = "/path/参数值"
  对应页面组件接收传递过来的参数值：$route.params.参数名

查询参数传参
在Home.vue首页导航链接中 ，三个链接“程序员”，“前端”，“前端大牛”,点击之后均能跳转到Search.vue组件内容上，想要跳转之后获取链接参数，在跳转路径上加上？key=参数。

点击链接跳转之后，地址栏路径会带上？key=参数

Search.vue组件上通过 $route.query.key 进行双大括号进行显示，但是在created中，需加this

<!-- App.vue -->
<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

<!-- Search.vue -->
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取
    console.log(this.$route.query.key);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

<!-- Home.vue -->
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search?key=程序员">程序员</router-link>
      <router-link to="/search?key=前端">前端</router-link>
      <router-link to="/search?key=前端大牛">前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

 动态路由传参：配置路由规则，配置导航链接，配置参数获取

配置路由规则，Search组件 地址栏路径后用动态参数名 ：words（任取)

配置导航链接，直接将需要的参数值写在地址栏路径后面 /参数值 

配置参数获取，展示时直接$route.params.参数名。在created中是this.$route.params.参数名 

<!-- App.vue -->
<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

<!-- Home.vue -->
<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search/程序员">程序员</router-link>
      <router-link to="/search/前端">前端</router-link>
      <router-link to="/search/前端大牛">前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic'
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<!-- Search.vue -->
<template>
  <div class="search">
    <p>搜索关键字: {{ $route.params.words }} </p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created () {
    // 在created中，获取路由参数
    // this.$route.query.参数名 获取
    // this.$route.params.参数名 获取
    console.log(this.$route.params.words);
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

// index.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search/:words', component: Search }
  ]
})

export default router

其实就是配置路由规则时，用：参数名 动态地将导航链接地址中写的参数值进行接收

 Vue路由 - 重定向：打开页面自动匹配相应组件

该路由规则就是匹配到根路径时，自动跳转到相应组件

Vue路由 - 404

在index.js中配置路由规则，在路由规则最后面写上匹配不到任何路径显示NotFound组件

在views文件夹下新建NotFound.vue组件，用来显示匹配不到路径的情况

在index.js中进行导入组件

 Vue 路由 - 模式设置

• hash路由（默认）（带#）
• history路由(常用)