import { createRouter, createWebHashHistory } from 'vue-router'

//导入创建的组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'

//配置路由的映射
const routes = [
  { path: '/home', component: Home },
  { path: '/About', component: About }
]

//创建router对象
const router = createRouter({
  routes,
  history: createWebHashHistory()
})

//将router导出
export default router

3.使用app注册路由对象（use方法）；

在main.js导入router，使用use方法使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

4.通过<router-link>和<router-view>使用路由

<template>
  <div class="app">
    <p>
      <router-link to="/home">主页</router-link>
      <router-link to="/about">关于</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

router-link路径切换，to编写要去的路径，router-view显示router-link的内容。

13.3.3.路由的默认路径

怎么让路径默认跳到首页，并且<router-view>渲染首页呢？

我们在routes中又配置了一个映射：

path配置的是根路径: /
redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.

const routes = [
  { path:'/', redirect: '/home'},
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

13.3.4.history模式

前面的hash模式可以看到路径上面有#，有的时候不希望出现这样的符号，可以设置为history模式。

只要从vue-router引入createWebHistory，并且在createRouter函数对象里面的history设置为createWebHistory()即可。

可以看到路径上没有#了。

13.3.5.router-link

router-link也可以设置其他的属性。?

?to属性：

是一个字符串，或者是一个对象；

replace属性：

设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；

使用replace属性，?在点击了有replace属性的路径的时候，新的路径直接替代旧的路径，不能通过返回键回到旧的路径。

active-class属性：

设置激活a元素后应用的class，默认是router-link-active；

?默认有router-link-active的class名，通过active-class可以设置class名。?

<template>
  <div class="app">
    <p>
      <router-link to="/home" active-class="active">主页</router-link>
      <router-link to="/about">关于</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>

?把active状态的class名改成active，就可以用css编写样式了。

exact-active-class属性：

链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

和active-class类似的用法。

13.3.6.路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载：

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效；
也可以提高首屏的渲染效率；

在11.5章节中有讲到怎么将代码分包。

Vue Router支持动态导入组件。

这是因为component可以传入一个组件，也可以接收一个函数，该函数需要放回一个Promise；
而import函数就是返回一个Promise。

const routes = [
  { path:'/', redirect: '/home'},
  { path: '/home', component: () => import('../components/Home.vue') },
  { path: '/about', component: () => import('../components/About.vue') }
]

在打包后，就会进行分包了。

打包代码 npm run build?

13.3.7.路由的其他属性?

name属性：路由记录独一无二的名称；

meta属性：自定义的数据。

const routes = [
  { path:'/',
   redirect: '/home'
  },
  { path: '/home',
    name: 'home', 
    component: () => import('../components/Home.vue'),
    meta: {
      name: 'zzz',
      age: 16
    }
  },
  { path: '/about',
    component: () => import('../components/About.vue') 
  }
]

13.4.动态路由

?很多时候我们需要将给定匹配模式的路由映射到同一个组件：

例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的ID是不同的；
在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数；

 {
    path: '/user/:id',
    component: () => import('../components/User.vue')
  }

在router-link中进行如下跳转：

路由后面可以加参数，但是显示的依然是同一个页面。

13.4.1.获取动态路由的值

在User.vue组件中如何获取到对应的值呢？

在template中，直接通过$route.params获取值；

<template>
  <div class="user">
    <h2>user: {{ $route.params.id }}</h2>
  </div>
</template>

在created中，通过this.$route.params获取值；也就是在vue2的options API中这么获取值。

 created() {
    console.log("create的",this.$route.params.id);
  }

在setup中，我们要使用vue-router库给我们提供的一个hook userRoute；这是提供给vue3 compositions API的；
该Hook会返回一个Router对象，对象中保存着当前路由相关的值。

import { useRoute } from 'vue-router'

setup() {
    const route = useRoute()
    console.log(route);
    console.log(route.params.id);
  }

13.5.NotFound

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面

比如NotFound的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面；

{
    path: '/:pathMatch(.*)',
    component: () => import('../components/NotFound.vue')
  }

?我们可以通过$route.params.pathMatch获取到传入的参数

<template>
  <div>NotFound:{{$route.params.pathMatch}}</div>
</template>

匹配规则加*

也可以在/:pathMatch(.*)后面加一个*;

{
    path: '/:pathMatch(.*)*',
    component: () => import('../components/NotFound.vue')
  }

?/:pathMatch(.*)与?/:pathMatch(.*)*的区别在于解析的时候，是否解析/:

?/:pathMatch(.*)

/:pathMatch(.*)*

13.6.路由嵌套

什么是路由的嵌套，上面写的Home、About、User等都属于第一层路由，我们在它们之间来回切换。

但是Home页面，也可能会在多个组件之间来回切换：我们可以使用嵌套路由，在Home中也使用router-view来占位之后需要渲染的组件。

比如下面的发现音乐页面还可以切换排行榜。

13.6.1.路由的嵌套配置

想要实现路由嵌套，可以嵌套一个children数组，在里面编写路由信息。

要注意path不需要/?

{ path: '/home',
    name: 'home', 
    component: () => import('../components/Home.vue'),
    meta: {
      name: 'zzz',
      age: 16
    },
    children: [
      {
        path: 'recommend',
        component: ()=> import('../components/homeRecommend.vue')
      }
    ]
  },

13.7.代码的页面跳转

一些普通元素想要进行页面跳转，不像router-link有to属性，所以我们就需要用代码编写方法来实现页面跳转。?

13.7.1.在vue2中实现页面跳转

编写一个触发跳转的元素，给该元素添加上方法。

btnClick() {
    this.$router.push('/about')
}

使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前页面是一个替换操作，那么可以使用replace。

btnClick() {
    this.$router.replace('/about')
}

?也可以传入一个对象。

btnClick() {
    this.$router.push({
        path: '/about'
    })
}

13.7.2.vue2页面跳转的query参数

使用对象写法可以传入更多的参数，可以传入query。

btnClick() {
    this.$router.push({
        path: '/about',
        query: { name: 'zzz',  age: 14 }
    })
}

在界面中可以通过$route.query来获取参数。

<h2>query{{ $rooute.query.name }}</h2>

13.7.3.vue3中实现页面跳转

在vue3中需要将useRouter函数导入，使用router?

对象参数和query参数与上面的vue2的类似。

13.7.4.页面的前进后退

router的go方法：

?router也有back：

通过调用 history.back() 回溯历史。相当于 router.go(-1)；

router也有forward：

通过调用 history.forward() 在历史中前进。相当于 router.go(1)

13.8.动态添加路由

某些情况下我们可能需要动态的来添加路由：

比如根据用户不同的权限，注册不同的路由；
这个时候我们可以使用一个方法 addRoute；

const adminRoute = {
  path:'/admin',
  component: () => import('../components/admin.vue')
}
router.addRoute(adminRoute)

?也可以判断是否拥有权限来动态添加路由。

let isAdmin = false
if(isAdmin){
  const adminRoute = {
    path:'/admin',
    component: () => import('../components/admin.vue')
  }
  router.addRoute(adminRoute)
}

上面的isAdmin的false值可以动态改变，当isAdmin为false的时候，就不添加admin这个路由。

如果想要为route添加一个children路由，那么需要传入name。

?给home添加children路由，在addRoute前面的参数添加name。

const adminRoute = {
    path:'/admin',
    component: () => import('../components/admin.vue')
  }
  router.addRoute('home', adminRoute)

13.8.1.动态管理路由

三种删除路由的方式：

1.添加name相同的路由；如果name相同，就会删除之前已经添加的路由，因为它们名字必须是唯一的。

router.addRoute({path:'/about', name:'about', components: About})

2.通过removeRoute方法，传入路由名称；

router.removeRoute('about')

3.通过addRoute方法的返回值回调；

const removeRoute = router.addRoute(routeRecord)
removeRoute()

除了删除路由，还有其他的方法。

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组。

13.9.路由导航守卫

比如要完成一个功能：只有在登录了之后才可以查看用户的订单，就可以用路由导航守卫在要跳转的两个页面中间拦截判断逻辑。

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

全局的前置守卫beforeEach是在导航触发时会被回调的：

它有两个参数：

to：即将进入的路由Route对象；
from：即将离开的路由Route对象；

它有返回值：

false ：取消当前导航；

不返回或者undefined ：进行默认导航；

返回一个路由地址：

? 可以是一个string类型的路径；

? 可以是一个对象，对象中包含path、query、params等信息；

router.beforeEach((to, from) => {
  console.log(to);
  console.log(from);
  return false
})

可选的第三个参数：next（不推荐使用）

在Vue2中我们是通过next函数来决定如何进行跳转的；
但是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

13.9.1.用户登录守卫案例

我们想完成一个需求：点击进入到订单页面，判断用户是否登录。

一般我们在完成登录的时候，服务器会传递一个token保存到localStorage来表示登录成功。

//route.js
router.beforeEach((to, from) => {
  console.log(to);
  console.log(from);
  const token = localStorage.getItem("token")
  if(!token && to.path === "/order"){
    return "/login"
  }  
})

Vue-Router还提供了很多的其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能：

https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html ?