路径和组件之间的映射关系，从而实现单页面的应用（SPA:single page application）

基本使用

装包
  1. yarn add vue-router

引入到main.js中
import VueRouter from "vue-router"

进行全局注册

通过Vue的注册第三方插件的方法Vue.use()

Vue.use(VueRouter)

创建路由规则数组

创建前需要先导入组件（component）

import Find from "/views/Find"
import My from "/views/My"
import Part from "@/views/Part"   //@表示src根目录

cosnt routes=[
  {
      path:'find',       //设置的hash路径
    component:Find,    //设置此路径下的组件
  },
  {
      path:'My',       //设置的hash路径
    component:My,    //设置此路径下的组件
  },
  {
      path:'part',       //设置的hash路径
    component:Part,    //设置此路径下的组件
  },
]

创建路由对象，传入规则
const router =new VueRouter({
    routes 
})

将路由对象挂载到Vue对象上
new Vue({
    router,
  render:h=>h(App),
}).$mount('#app')

在App.vue上添加<router-view></router-view>标签来设置组件的挂载点

将<components>换成<router-view>

 <!--  设置挂载点-当url的hash值路径切换, 显示规则里对应的组件到这 -->
<router-view></router-view>

通过点击a标签来跳转不同的组件
<a href="#/find"></a>

就是当hash路径修改时切换不同的组件进行显示

声明式导航

通过router-link标签来代替a标签，将a标签的 href 属性替换成 to 属性，并且地址前不需要加# 其实渲染后依然是以a标签的形式，而且 #也会加上

优点：

  1. 切换组件时，给对应的a标签添加高亮类名
 <!--  App.vue  -->
<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <!--  切换的组件显示在下面的标签内  -->
      <router-view></router-view>
    </div>
  </div>
</template>

跳转传参

在点击跳转时将参数传进组件内，通过router-link的 to 属性来传值

  • 查询字符串：/path?参数名=值
  • 动态路径参数：/path/值1/值2/值3 （需要设置动态参数 ：/path/:参数名1/:参数名2/:参数名3）

动态参数在创建路由规则时添加在hashi路径里
const routes=[
    {
    path: "/part",
    component: Part
  },
{
    path: "/part/:username", // 有:的路径代表要接收具体的值
    component: Part
  },
]

跳转时参数传入组件
<router-link to="/part?name=yuanmo">朋友-yuanmou</router-link>
<router-link to="/part/袁某">朋友-袁某</router-link>

组件接收参数
$route.query.参数名    //查询字符串的形式
$route.params.参数名   //动态路径参数

重定向

匹配到 path 后强制切换到目标的 path 上

在目标路径时强制跳转，例如在/直接跳转到/main，位置路径直接跳转到 404 页面

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find 注意此处不是 component
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

重定向后还是需要在路由规则里进行匹配一次

404 页面设置

使用通配符*将所有未设定的路径强制跳转到 404 页面，*路由必须写在路由规则的最后面

// 404在最后(规则是从前往后逐个比较path)
{
  path: "*",
  component: NotFound   //创建的 404 组件 需要添加后再使用
}

路由模式修改

通过路由对象VueRouter内部添加 mode 属性来修改路由的模式（即路径的方式）

// 5. 生成路由对象
const router = new VueRouter({
  routes,// routes是固定key(传入规则数组)
  mode: "history" // 默认不写是"hash"  history路径没有#但需要后端配合
})

编程式导航

使用 JS 代码来进行跳转

基础使用

语法

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},

跳转传参

两种方式：

  1. query
  2. params

    语法

    this.$router.push({
 path: "路由路径"
 name: "路由名",
 query: {
     "参数名": 值
 }
 params: {
     "参数名": 值
 }
})
//这里仅是列出类型
// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值
    注意：path 不能和 parmas 一起使用

例子

设置点击事件，将路径和组件标签名作为参数传输方法内

 <!-- js编程式传参 -->
<span @click="btn('/find', 'Find')">发现音乐</span>

设置方法来传入参数

 btn(targetPath, targetName) {
      this.$router.push({
        path:targetPath,    //name: targetName,   name需要在路由规则里设置
        query: {
          name: "",
        },
      });
    },
  },