一.什么是路由？

路径和组件的映射关系

二.为什么使用路由？

(1).前端路由作用:实现业务场景切换

(2).单页面应用(SPA):所在功能在一个html页面上实现

（3）优点:

整体不刷新页面，用户体验更好

数据传递容易，开发效率高

三.关于vue-router

1.介绍:vue-router模块包，它和Vue.js深度集成,可以定义---视图表（映射规则）,

提提供2个内置全局组件，声明式导航自动激活的CSS class的链接

2.使用:

1.安装:

npm i vue-router

2.导入路由:



import Find from '../views/find.vue'
import My from '../views/my.vue'
import Part from '../views/part.vue'  //引入自己要引入的文件

import VueRouter from 'vue-router'

3.使用路由插件

Vue.use(VueRouter)

4.创建路由规则数组

    const routes = [
      {
        path: "/find",
        component: Find
      },
      {
        path: "/my",
        component: My
      },
      {
        path: "/part",
        component: Part
      }
]

5.生成路由对象

const router = new VueRouter({
  routes
})

6. 关联到vue实例

new Vue({
  router
})

四.2个内置全局组件

1.<router-view></router-view> 的使用

(1)作用: 设置挂载点,也被称为路由占位符 ,用来显示要展示的内容

2.<router-link> </router-link> 声明式导航的使用

(1)它是内置提供的一个组件可以进行高亮效果的显示

(2)to相当于href属性，使用的时候用<router-link> </router-link> 进行包裹注意不要使用#。

      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>

(3)跳转传参

1. 静态传递

(1) 传递: /path？参数名=值

(2) 接收: $route.query.参数名

2. 动态路由

(1):路由规则path上定义/path/:参数名

(2):to="/path/值"

（3）接收: $route.params.参数名

五.路由重定向

1.为什么要设置重定向？

解决在网页打开的时候，没有一个默认的网页

2.设置的方法

在规则数组里面定义

 {
    path: "/",  匹配根路径
    redirect: '要重定向的路径'
  }

六.路由404设置

1.当访问不存在的路径不存在时候，设置一个不存在的页面

2.在规则数组里面配置,位置在数组的最后面进行配置

3.代码

{
    path: "*",
    component:组件的名字
  }

组件里面显示没有找到要显示的内容

七.路由模式的修改

1.两种模式

3.在路由对象里面进行设置mode:"history"

2.代码:

八.路由的嵌套

1.在现有的一级路由下，在嵌套二级路由

2.图示：

3.具体的使用

（1）建立好二级路由的页面

（2）在对应的一级配置好二级路由关系

（3）在一级页面下也好创建一个挂载点，并设置跳转路径

（4）注意点

如果根路径是/那加不加都没什么区别

如果没有/就需要和一级路径做拼接使用

如果有/就直接访问即可

八.激活类名的区别

（1）router-link-exact----active--url的hash值和href完全匹配

（2）router-link-active-url的hash值包含href路径值匹配

九.路由守卫

1.语法:router.beforeEach((to,from.next)=>{

//路由跳转之前先执行这里，决定是否跳转

})

to:要跳转到的路由（路由对象信息）

from:从哪里跳转的路由（路由对象信息）

next: next（）才会让路由正常的跳转切换，next（false）在原地停留

next（”强制修改到另一个路由上去“），注意:如果不调用next，页面停留在原地

2.应用场景:当你要对路由权限判断时

3.代码示例:

// 例子: 判断用户是否登录, 是否决定去"我的音乐"/my
const isLogin = true; // 登录状态(未登录)
router.beforeEach((to, from, next) => {
  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

新手小白，多多支持

Vue路由简介和基础使用