Vue学习记录之二十七路由router的使用_creatememoryhistory-优快云博客

本文链接：https://blog.youkuaiyun.com/LvManBa/article/details/143397347

一、系统构建

pnpm create vite@latest demo5

初始化的时候，选择安装路由
在这里插入图片描述
目录结构：

如果没有选择安装，也可以独立安装

npm install vue-router@4

配置按照第二张图进行即可。

二、路由配置

router/index.ts

import {
    createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
   
   /*
  两种模式：
  1、createWebHashHistory()  哈希模式 既地址后面有个#/reg, #/login
  2、createWebHistory()  如：/reg,  /login
  */
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
   
      path: '/',             //路由地址
      name: 'home',          //路由命名
      component: HomeView    //component 可以先通过import导入，也可以直接 动态导入:()=>import('')
    },
    {
   
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})
export default router     //导出router模块

也可以使用下面的模式


//引入路由对象
import {
    createRouter, 
        createWebHistory, 
        createWebHashHistory, 
        createMemoryHistory, 
        RouteRecordRaw } from 'vue-router'
 
//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory
 
//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
   
    path: '/',
    component: () => import('../components/a.vue')
},{
   
    path: '/register',
    component: () => import('../components/b.vue')
}]
 
const router = createRouter({
   
    history: createWebHistory(),
    routes
})
 
//导出router
export default router

hash 实现

hash 是 URL 中 hash (#)及后面的那部分，常用作锚点在页面内进行导航，改变 URL 中的 hash 部分不会引起页面刷新
通过 hashchange事件监听URL的变化，改变URL 的方式只有这几种:
1.通过浏览器前进后退改变URL
2.通过< a> 标签改变URL
3.通过window.location改变URL
在这里插入图片描述

history实现

history 提供了 pushState和replaceState两个方法，这两个方法改变URL的 path 部分不会引起页面刷新
history 提供类似 hashchange 事件的popstate 事件，但popstate事件有些不同:
1.通过浏览器前进后退改变 URL 时会触发popstate 事件
2.通过pushState/replaceState或 < a> 标签改变 URL不会触发popstate 事件。
3.好在我们可以拦截pushState/replaceState的调用和< a>标签的点击事件来检测URL 变化
4.通过js 调用history的back，go，forward方法可触发该事件
所以监听URL 变化可以实现，只是没有hashchange那么方便。
在这里插入图片描述

跳转：

三、路由的使用

1、声明式导航

不建议直接使用< a> 标签，因为页面有刷新，煽动。
第一种方式：to = “路由中定义的path”

<div class="wrapper">
  <!--路由导航-->
  <nav>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </nav>
</div>

<!--现在子路由的位置-->
<RouterView />

第二种方式： :to=“{name:‘路由中定义的name’}”

<div class="wrapper">
  <nav>
    <RouterLink :to="{name:'home'}">Home</RouterLink>
    <RouterLink :to="{name:'about'}">About</RouterLink>
  </nav>
</div>
 <!--现在子路由的位置-->
<RouterView />

第三种，< a>跳转，不推荐

 <div class="wrapper">
   <nav>
     <a href="/">Home</a>
     <a href="/home">About</a>
   </nav>
 </div>
<RouterView />

2、编程式导航

Vue Router 提供了push和replace两个主要的方法来进行导航：

push: 用于导航到一个新的URL，添加一个新的历史记录项。
replace: 用于导航到一个新的URL，替换掉当前的历史记录项。

2.1、使用路由路径中定义的path

<script setup lang="ts">
import {
      useRouter, RouterView } from 'vue-router'
const router = useRouter()
const change = (url:string) => {
     
  //第一种方式：字符串的形式
  //router.push(url) 
  //第二种方式：对象的形式
  router.push({
     
    path: url
  })
}
</script>

<template>
    <div >
        <button @click="change('/')">跳转到Home</button>
        <button @click="change('/about')">跳转到About</button>
    </div>
  <RouterView />
</template>

2.2、如果路由的命名中定义的name

<script setup lang="ts">
import {
      useRouter, RouterView } from 'vue-router'
const router = useRouter()
const change = (url:string) => {
     
  router.push({
     
    name: url      //传递的路由地址name,这里只能使用函数的形式，如果字符串path，无法调整到 '/' 这个path
   })
}
</script>

<template>
    <div >
        <button @click="change('home')">跳转到Home</button>
        <button @click="change('about')">跳转到About</button>
    </div>
  <RouterView />
</template>

3、匿名导航

条件导航，动态决定目标路由

<template>
  <div>
    <button @click="conditionalNavi">Conditional Navigation</button>
  </div>
</template>

<script setup lang="ts">
import {
      useRouter } from 'vue-router';

const router = useRouter();
const isAuthenticated = false; // 假设一个认证状态

function conditionalNavi() {
     
  router.push(() => {
     
    if (isAuthenticated) {
     
      return {
      name: 'Dashboard' }; // 已认证的用户导航到 Dashboard
    } else {
     
      return {
      name: 'Login' }; // 未认证的用户导航到登录页
    }
  });
}
</script>

四、历史记录

在这里插入图片描述

一般情况下，我们浏览完某个站点，会留下历史记录，可以通过浏览器的前后箭头来前进和后退。如果某些需求不需要留下历史记录该如何操作那？
如果是声明式导航(RouterLink)，只需添加replace属性，浏览器的前后按钮就会失效

<div>
    <RouterLink replace :to="{name:'home'}">跳转到Home</RouterLink>  |
    <RouterLink replace :to="{name:'about'}">跳转到About</RouterLink>
</div>

如果是编程式导航，将push 修改为 replace

<script setup lang="ts">
import {
    useRouter, RouterView } from 'vue-router'
const router = useRouter()
const change = (url:string) => {
   
  //1、字符串的形式
  //router.replace(url) 
  //2、对象的形式
  router.replace({
   
    path: url
  })
}
</script>

我们也可以通过按钮来控制前进和后退

<script setup lang="ts">
import {
      useRouter, RouterView,RouterLink } from 'vue-router'
const router = useRouter()
const change = (url:string) => {
     
  router.push({
     
    name: url
  })
}
const next = () => {
     
  router.go(1)   //1代表前进1个历史。
}
const prev = () => {
     
  //router.go(-1)  //也可以设置后退几个历史,后退是负数
  router.back()    //一般我们使用back()来后退
}
</script>

<template>
    <div>
        <RouterLink :to="{name:'home'}">跳转到Home</RouterLink>  |
        <RouterLink :to="{name:'about'}">跳转到About</RouterLink>
    </div>
    <div>
        <button @click="change('home')">跳转到Home</button>  |
        <button @click="change('about')">跳转到About</button>
    </div>
    <div>
        <button @click="next()">next</button>  |
        <button @click="prev()">