Vue3-router4的使用

一、初始化

1.构建项目

npm init vue@latest
//或者
npm init vite@latest

2.安装

npm install vue-router@4

3.配置路由

在src目录下面新建router 文件 然后在router 文件夹下面新建 index.js

import { createRouter, createWebHistory } from "vue-router";


const routes = [
    {
        path: '/',
        component: () => import('../components/One.vue')
    },
    {
        path: '/b',
        component: () => import('../components/Two.vue')
    },
]

const  router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

模式的使用

history： vue3 createWebHistory
hash： vue3 createWebHashHistory
abstact：vue3 createMemoryHistory

4.main.js路由挂载

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

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

5.路由跳转方式

router-link+path

router-link+name

编程式

a标签（会导致页面刷新）

<template>
  <div>
    <hr />
    <div>
      <router-link to="/">Toa</router-link>
      -----------------
      <router-link to="/b">Tob</router-link>
      <hr />
      <router-link :to="{ name: 'one' }">Toa</router-link>
      -----------------
      <router-link :to="{ name: 'two' }">Tob</router-link>
      <hr />
      <a href="/">Toa</a>
      -----------------
      <a href="/b">Tob</a>
      <hr />
      <button @click="toPage('/')">Toa</button>
      <button @click="toPage('/b')">Tob</button>
    </div>

    <hr />
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();
const toPage = (url) => {
  router.push(url);
};
</script>

二、消除历史记录

1.router-link的使用

 <router-link replace to="/">Login</router-link>
 <router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

2.编程式的使用

使用router.replace

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = (url: string) => {
  router.replace(url)
}

3.横跨历史相关

      <button @click="router.go(1)">go1</button> //可取任意正负数
      <button @click="router.back()">back</button>//向后
      <button @click="router.forward()">forward</button>//向前

三、路由传参

1.query

  let query = {
    name: "huang",
    price: "$66",
    id: "5",
  };
  router.push({
    name: "page",
    query,
  });

2.params

let params = {
    name: "huang",
    price: "$66",
    id: "5",
  };
  router.push({
    name: "page",
    params,
  });

3.接收

<script setup>
import { useRoute } from "vue-router";

const route = useRoute()
</script>

<template>
  <div>
    query:
    <div>品牌：{{ route.query?.name }}</div>
    <div>价格：{{ route.query?.price }}</div>
    <div>ID：{{ route.query?.id }}</div>
  </div>
   <div>
    params:
    <div>品牌：{{ route.params?.name }}</div>
    <div>价格：{{ route.params?.price }}</div>
    <div>ID：{{ route.params?.id }}</div>
  </div>
</template>

4.动态路由

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件。

router配置

    {
        path: '/page/:id',
        name: "pageid",
        component: () => import('../components/Page.vue')
    },

5.二者的区别

1. query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
2. query 在路由配置不需要设置参数，而 params 必须设置
3. query 传递的参数会显示在地址栏中
4. params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
5. 路由配置

三、嵌套路由

children 配置只是另一个路由数组，就像 routes 本身一样。

 {
    path: "/user",
    component: () => import('../components/footer.vue'),
    children: [
        {
            path: "",
            name: "Login",
            component: () => import('../components/login.vue')
        },
        {
            path: "reg",
            name: "Reg",
            component: () => import('../components/reg.vue')
        }
    ]
},

四、命名视图

1. 命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。
2. 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。
3. 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

  {
        path: "/",
        components: {
            default: () => import('../components/layout/menu.vue'),
            header: () => import('../components/layout/header.vue'),
            content: () => import('../components/layout/content.vue'),
        }
    },

对应Router-view 通过name 对应组件

    <div>
        <router-view></router-view>
        <router-view name="header"></router-view>
        <router-view name="content"></router-view>
    </div>

五、重定向

1. 字符串形式配置，访问/ 重定向到 /user （地址栏显示/,内容为/user路由的内容）

const routes  = [
    {
        path:'/',
        component:()=> import('../components/root.vue'),
        redirect:'/user1',
        children:[
            {
                path:'/user1',
                components:{
                    default:()=> import('../components/A.vue')
                }
            },
            {
                path:'/user2',
                components:{
                    bbb:()=> import('../components/B.vue'),
                    ccc:()=> import('../components/C.vue')
                }
            }
        ]
    }
]

2.对象形式配置

const routes  = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: { path: '/user1' },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

3.函数模式（可以传参）

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: (to) => {
            return {
                path: '/user1',
                query: to.query
            }
        },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

别名 alias

将 / 别名为 /root，意味着当用户访问 /root时，URL 仍然是 /user，但会被匹配为用户正在访问 /

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        alias:["/root","/root2","/root3"],
        children: [
            {
                path: 'user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: 'user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

六、路由元信息

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

• 权限校验标识。
• 路由组件的过渡名称。
• 路由组件持久化缓存 (keep-alive) 的相关配置。
• 标题名称
• 我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录"
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta: {
        title: "首页",
      }
    }
  ]
})

---

例：过渡效果：给组件one，two加上animate的动画过渡效果，需要配合使用v-slot

 {
        path: '/',
        name: 'one',
        component: () => import('../components/One.vue'),
        meta: {

            transition: "animate__bounceIn",
        }
    },
    {
        path: '/b',
        name: "two",
        component: () => import('../components/Two.vue'),
        meta: {

            transition: "animate__bounceIn",
        }
    },

    <router-view #default="{ route, Component }">
      <transition
        :enter-active-class="`animate__animated ${route.meta.transition}`"
      >
        <component :is="Component"></component>
      </transition>
    </router-view>

七、滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法

const router = createRouter({
    history: createWebHistory(),
    scrollBehavior:(to,from,savePosition)=>{
        console.log(to,from,savePosition);
        
        // return{
        //     top:200
        // }
        if(savePosition) return savePosition //如果有原来的位置，就返回到原来的位置
        else return {//没有就回到顶部
            top:0
        }
    },
    routes
})