vue3 配置路由

index.js 文件内容如下

// history模式
import {
    createRouter,
    createWebHashHistory,
} from 'vue-router'

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
以下可以另写一个 routes.js 
const routes = [
// 路由的默认路径
    {
        path:'/',
        redirect:"/home"
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
]

// 创建路由对象
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;

main.js

import {
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

App.vue

<template>
  <div>
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
</style>

router-link
上面有提到过router-link，下面我们来简单介绍一下他的使用
router-link事实上有很多属性可以配置：

to属性：是一个字符串，或者是一个对象
replace属性：设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；
active-class属性：设置激活a元素后应用的class，默认是router-link-active
exact-active-class属性：链接精准激活时，应用于渲染的 的 class，默认是router-link-exact-active；
路由懒加载
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会
更加高效；

这里可以使用webpack的分包知识，而Vue Router默认就支持动态来导入组件

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

而import函数就是返回一个Promise；

const routes = [{
path: ‘/’,
redirect: “/home”
},
{
path: ‘/home’,
component: () => import(’…/pages/Home.vue’)
},
{
path: ‘/about’,
component: () => import(’…/pages/About.vue’)
},
]

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

在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

{
path: “/user/:id”,
component: () => import(’…/pages/user.vue’)
}

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

<router-link to="/user/123">user</router-link>

获取路由的值
在setup中，我们要使用 vue-router库给我们提供的一个hook useRoute；

<template>
  <div>{{ route.params }}</div>
</template>

<script>
import { useRoute } from "vue-router";
export default {
  setup() {
    const route = useRoute();

    return { route };
  },
};
</script>

<style lang="scss" scoped>
</style>

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

路由的嵌套

   {
        path: '/home',
        component: () => import( /* webpackChunkName:"home-chunk"*/ '../pages/Home.vue'),
        children: [{
            path:'',
            redirect:'/home/product'
        },{
            path:'product',
            component:()=>import('../pages/HomeProduct.vue')
        }]
    },

代码的页面跳转

setup() {
    const router = useRouter();
    const jumpTo = () => {
      router.push({
        path: "/about",
        query: {
          name: "fuck",
        },
      });
    };
    return {jumpTo};
  },

页面的请求

 {{$route.query}}

router-view的v-slot

router-view也提供给我们一个插槽，可以用于 和 组件来包裹你的路由组件：

Component：要渲染的组件；

route：解析出的标准化路由对象；

路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局的前置守卫beforeEach是在导航触发时会被回调的：
它有两个参数：to：即将进入的路由Route对象；from：即将离开的路由Route对象；
它有返回值：false：取消当前导航；不返回或者undefined：进行默认导航；
返回一个路由地址：可以是一个string类型的路径；可以是一个对象，对象中包含path、query、params等信息；
可选的第三个参数：next
在Vue2中我们是通过next函数来决定如何进行跳转的；
但是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

router.beforeEach((to, from) => {
    console.log('to', to)
    console.log('from', from)
    if (to.path !== '/about') {
        const token = localStorage.setItem('token', 'qwer')
        if (!token) {
            return '/about'
        }
    }
})