Vue路由，vue-router ，路由跳转 Vue全家桶第一桶

前端路由单页面

只有一个HTML 页面 所有功能在一个页面上实现
优点：

• 整体不刷新页面，用户体验更好
• 数据传递容易, 开发效率高
  缺点：
• 开发成本高(需要学习路由)
• 首次加载会比较慢一点。不利于seo搜索引擎优化

依赖路由切换页面

vue-router

本质：是一个第三方包
基本使用：
1.下载vue-router

yarn add vue-router

2.引入 （在main.js中）

import VueRouter from 'vue-router'

3.注册全局组件

// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

4.定义规则数组

const routes = [{ 
path:"/xxx",
component:xxx
}]

5.生成路由对象

const router = new VueRouter({
  routes //routes 是固定key（传入规则数组）
})

6.关联Vue实例对象

new Vue({
  router
})

7. 设置挂载点-当url的hash值路径切换，显示规则里对应的组件

<router-view></router-view>

在引用路由时 通过 @/ 用当前 src 的绝对路径引入

import NotFound from '@/views/NotFound'

声名式导航

vue-router 提供了一个全局组件 router-link

<router-link to="/xx"> </router-link> //必须传入to属性，指定路由路径不需要 #

好处：router-link 自带激活时的类名 ，可以做高亮（激活时的样式）只要在style添加类名的属性

声名式导航 - 激活类名区别

1.url上hash值 (#/home/recommend) 包含 导航的href值 (#/home) 当前a就有==“router-link-active” ==（模糊匹配）
2.url上hash值(#/home/recommend) 等于 导航的href值(#/home/recommend) 当前a就有 == “router-link-exact-active” == (精确匹配)

声名式导航—传值

方式1：
to="/path?参数名=值"
接收：$route.query.参数名

<router-link to="/part?name=小李">朋友-小李</router-link>

方式2：
（1）：路由规则path上定义 /path/:参数名
（2）：to="/path/值"
接收：$route.params.参数名

<router-link to="/part/小王">朋友-小王</router-link>

总结：
?key=value 用 $route.query.key 取值
/值 提前在路由规则/path/:key 用 $route.params.key 取值

默认路由 — 重定向

在规则中定义path:'/'
通过 redirect 配置项 值是要强制切换的路由路径

{
    path: "/",
    redirect: "/find"
  }

路由 — 404

找不到路径给个提示页面 一定要放到 path 数组的最后面 匹配不到前面的path才会显示

{
    path: "*",
    component: NotFound
  }

路由 - 模式设置

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 默认模式是hash（回去url中的#）
})

vue路由 - 编程式导航

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

//路由数组里, 给路由起名字
{
    path: "/find",
    name: "Find",
    component: Find
  },
  
 // 换成span 配合js的编程式导航跳转
 <span @click="btn('/part', 'Part')">朋友</span>
 
 // 使用语法
 this.$router.push({path: "路由路径"})
 this.$router.push({name: "路由名"})

注意：虽然用name跳转，但是url 的hash值还是切换path路径值
场景：
方便修改：name路由名（在页面上看不见随便定义）
path可以在url的hash值看到（尽量符合组内规范）

编程式导航 - 跳转传参

this.$router.push({
    name: "路由名字",
    params: {
        "key": 值
    }
})
// 对应路由接收   $route.params.key 取值
例：
name+params  =>  $route.params.key接收
<span @click="oneBtn">朋友-小李</span>
 oneBtn(){
      this.$router.push({
        name: "Part",
        params: {
          username: "小李"
        }
      })
 }   
{{$route.params.username}}  // 小李

// 第二种
this.$router.push({
    path: "路由路径",
    query: {
        "key": 值
    }
})
// 对应路由接收   $route.query.key 取值
path+query   =>  $route.query.key接收
例：
<span @click="twoBtn">朋友-小王</span>
twoBtn(){
      this.$router.push({
        path: "/part",
        query: {
          name: "小王"
        }
      })
    }
  }
{{$route.query.name}}  // 小王

区别:
name+params (内存中传递) - 刷新网页就不在了
path+query (hash值?后面) - 刷新网页还在

注意:
JS要跳转时, 如果当前url上"hash值"和"要跳转"的"一致", 发生路由重复的报错, 不会跳转

路由嵌套

路由嵌套
创建需要的二级页面
路由规则里面 children 中配置二级路由规则对象
一级页面中设置 router-view 显示二级路由页面
注意：
二级路由 path 一般不写根路径 /
跳转时路径要从 / 开始

路由守卫

场景：要对路由权限判断时
语法：router.beforeEach((to,form,next)=>{// 路由跳转“之前”先执行这里，决定是否跳转})
参数1：要跳转到的路由（路由对象信息） —> 目标
参数2：从哪里跳转的路由（路由对象信息） —> 来源
参数3：函数体 next() 才会让路由正常的切换，next(false)在原地停留，next(“强制修改带另一个路由路径上”)
注意: 如果不调用next, 页面留在原地

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