vue-router4 出现 No match found for location with path "/"

#### router/index.ts文件
import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'home', //这里的name
component:()=>import('../pages/test/test.vue')
},
{
path: '/home',
name: 'home', //这里的name
component:()=>import('../pages/home/home.vue')
},
]
const router = createRouter({
history:createWebHashHistory(), //哈希值模式
routes
})
// 暴露出去
export default router

出现问题的原因

在控制台出现,找不对应的路径 No match found for location with path "/"
在浏览器上出现空白页面。
是因为你的路由 name字段重复导致的。

vue-router中的name有什么作用呢?

1.路由中的name应该是唯一值,不应该重复。
router-link 中的to属性通过name的值可以进行路由跳转 <template>
<router-link :to="{name:'home'}">去测试页面</router-link>
<router-view></router-view>
</template> const routes: Array<RouteRecordRaw> = [
{
path: '/home',
name: 'home', //这个name应该是唯一值
component:()=>import('../pages/home/home.vue')
},
]

a标签的跳转与 router-link 的区别

a标签通过 <a href="/home">进行跳转的时候。
整个页面会重新刷新(左上角的圈圈会刷新),页面会闪一下
router-link 进行跳转的时候整个页面不会重新刷新 [页面不会闪一下]

跳转的时候不保留当前页面的历史记录 router.replace

就是说A页面跳转到B页面的时候。
不保留A页面的历史记录。我们可以通过router.replace('/b')

query 传递参数和接受参数

let paramsinfo = {
name: 'zs',
age:13
}
const gotosPage = () => {
router.push({
path: '/home',
query: paramsinfo
})
}
query传递参数的时候是只能够是一个对象。
query传递参数的时候在地址栏会自动给你使用"?和&链接" 接受参数的时候通过 route.query.xxx

parmas 传递参数和接受参数

parmas传递参数的时候,不会在地址栏展示。
它是通过内存来传递参数的。
router.push({
name:'你路由中的name',
parmas:'是一个对象'
}) 接受参数的时候
route.params.xxx
需要注意的是:由于它是通过内存来传递参数的,在接受页面刷新的时候,参数肯定会丢失的。
可以通过动态路由传递参数来解决

动态路由参数

#### index.ts文件
{
path: '/',
name: 'test',
component:()=>import('../pages/test/test.vue')
},
{
path: '/home/:idkey', //注意这里的idkey
name: 'Home',
component:()=>import('../pages/home/home.vue')
} #### 跳转到home页面
const gotosPage = (mess) => {
router.push({
name: 'Home',
params: {
//必须和路由路径中的idkey保持一致
idkey: mess.id
}
})
} #### 接受参数
import { useRoute } from 'vue-router'
let route = useRoute()
console.log(route.params.idkey)

动态路由参数的场景

当我们从列表页进入详情页的时候,
就可以使用动态路由参数来解决这个问题

命名视图

index.ts文件
{
path: '/aa',
name: 'Aa',
component: () => import('../pages/aa/aa.vue'),
children: [
{
path: '/user1',
components: {
default:()=> import("../components/user1.vue")
}
},
{
path: '/user2',
components: {
Bb2: () => import("../components/user2.vue"),
Bb3:()=> import("../components/user3.vue")
}
}
]
} aa.vue文件
<template>
<div>
<h2>父页面</h2>
<router-link to="/user1" style="margin-right:10px">user1</router-link>
<router-link to="/user2">user2</router-link>
<router-view></router-view>
<router-view name="Bb2"></router-view>
<router-view name="Bb3"></router-view>
</div>
</template> 当地址栏是user1的时候,默认展示的是user1这个页面。
当地址栏是user2的时候,默认展示的是user2和user2这两个页面

路由重定向 redirect

redirect的值可以是一个字符串,也可以是一个回调函数。
index.ts文件
{
path: '/aa',
name: 'Aa',
//重定向到user1。并且携带了参数
redirect: () => {
return {
path: '/user1',
query: {
name:'zs'
}
}
},
component: () => import('../pages/aa/aa.vue'),
children: [
{
path: '/user1',
components: {
default:()=> import("../components/user1.vue")
}
},
{
path: '/user2',
components: {
Bb2: () => import("../components/user2.vue"),
Bb3:()=> import("../components/user3.vue")
}
}
]
},

别名alias

{
path: '/',
alias:['/a1','/a2'],
name: 'test',
component:()=>import('../pages/test/test.vue')
}
路径不同,但是访问的都是同一个组件。

前置路由守卫 (router.beforeEach) 设置title

main.ts文件
router.beforeEach((to,from,next) => {
document.title = to.meta.title
next()
})
//有ts报错信息
不能将类型“unknown”分配给类型“string”。 在index.ts文件
//中定义路由title的类型
declare module 'vue-router' {
interface RouteMeta{
title:string
}
}

路由过渡效果

animate.css的地址: https://animate.style/
第一步:下载 cnpm install animate.css --save
因为等会我们的动画效果将会使用这个库 第二步:在index.ts文件中设置动画样式
//这里我们使用的是 animate__fadeIn 渐入的效果
import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'
// 定义类型
declare module 'vue-router' {
interface RouteMeta{
title: string,
transition ?:string
}
}
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'test',
meta: {
title: '首页',
//动画效果渐入
transition:"animate__fadeIn",
},
component:()=>import('../pages/test/test.vue')
},
]
const router = createRouter({
history:createWebHashHistory(), //哈希值模式
routes
})
// 暴露出去
export default router 第三步使用动画效果 app.vue文件中
<template>
<router-view #default="{ route, Component }">
<!-- 使用方法,在class里加上类animate__animated与任何动画名称一起添加到元素,此处为渐入的效果 -->
<transition :enter-active-class="`animate__animated ${route.meta.transition}`">
<component :is="Component"></component>
</transition>
</router-view>
</template>
<script lang="ts" setup>
//引入动画库
import 'animate.css';
</script>

滚动行为

A页面有滚动条,在距离顶部400px的地方。点击按钮前往了B页面。
当B页面做完一些操作后,返回A页面。滚动条仍然在400px的地方。
index.ts文件
const router = createRouter({
history: createWebHashHistory(), //哈希值模式
// 路由滚动
scrollBehavior: (to, from, savePosition) => {
// 记录滚动条滚动到的位置
if (savePosition && savePosition.top) {
return savePosition
} else {
return {
top:0
}
}
},
routes
}) scrollBehavior也是支持异步的
const router = createRouter({
history: createWebHashHistory(), //哈希值模式
// 路由滚动
scrollBehavior: (to, from, savePosition) => {
// 记录滚动条滚动到的位置
return new Promise((resolve) => {
setTimeout(() => {
resolve({
top:500
})
},1500)
})
},
routes
})

vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为的更多相关文章

  1. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  2. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  3. Vue学习笔记【29】——Vue路由(命名视图实现经典布局)

    命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    < ...

  4. (转)vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  5. vue router 如何使用params query传参,以及有什么区别

    写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞 ...

  6. vue页面传参和接参

    https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...

  7. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  8. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  9. C++ 传参时传内置类型时用传值(pass by value)方式效率较高

    来源:唐磊的个人博客<C++ 传参时传内置类型时用传值(pass by value)方式效率较高> 在<Effective C++>里提到对内置(C-like)类型在函数传参时 ...

随机推荐

  1. npm切换到国内华为云的镜像

    npm下载包很慢?不能忍,切换到国内华为云的镜像吧. npm config set registry https://repo.huaweicloud.com/repository/npm/ npm ...

  2. 浅析DispatchProxy动态代理AOP

    浅析DispatchProxy动态代理AOP(代码源码) 最近学习了一段时间Java,了解到Java实现动态代理AOP主要分为两种方式JDK.CGLIB,我之前使用NET实现AOP切面编程,会用Fil ...

  3. 2022年最强八股文《码出八股文-斩出offer线》

    宝剑锋从磨砺出,梅花香自苦寒来,大家好,我是小码哥 整理好的八股文终于完成了,希望看完对大家面试有所收获! 目录: 基础篇 javaOOP面试题 java集合/泛型面试题 java异常面试题 java ...

  4. Spring框架系列(3) - 深入浅出Spring核心之控制反转(IOC)

    在Spring基础 - Spring简单例子引入Spring的核心中向你展示了IoC的基础含义,同时以此发散了一些IoC相关知识点; 本节将在此基础上进一步解读IOC的含义以及IOC的使用方式.@pd ...

  5. 关于个人全栈项目【臻美Chat】遇到的BUG以及解决方法

    项目展示: 问题总结:一.单用户重复登录设备 将每次输入的用户名与已经记录在后台的数组ar比较,如果存在则表示重复. // 生成数组var ar="";socket.on('arr ...

  6. 第一章:Python的数据结构、函数和文件

    list list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> classmates = ['Michael', ...

  7. nodejs - http.request是否有超时

    默认没有.那么,req.setTimeout(msec, callback)是干什么用的. 它的意思是 socket msec 没有活动后执行callback,不帮你关闭连接. 就像一个秒表,每收到数 ...

  8. Math类和函数定义

    Math这个类是java系统内部当中的一个类,他用来提供一些基本的数学操作,他也有些工具可以给我们用比如 :abs--算绝对值   pow--算幂次   random--随机数   round--四舍 ...

  9. AI2(App Inventor 2) 离线版

    介绍 我们的目标:搭建一个本地多用户的App Inventor 2 服务器目的:课堂教学,社团活动,兴趣学习优势:管理权限(用户管理,账号切换,资源打包),网络链接速度快,拥有配套服务.注意:每次退出 ...

  10. dockerfile操作

    简介 Dockerfile 是一个用来构建镜像的文本文件,文本内容包含了一条条构建镜像所需的指令和说明. 上下文路径 如下是一个简单的基于dockerfile创建镜像的命令,我们注意到启动处理镜像名和 ...