vue-router 路由_route-link-to-优快云博客

本文链接：https://blog.youkuaiyun.com/fagdg/article/details/126189116

本文详细介绍了vue-router的核心概念，包括<router-link>和<router-view>组件的使用，路由配置，编程式路由跳转如前进、后退和切换，以及如何获取和操作路由信息如params、query、path等。此外，还涵盖了路由守卫的多种应用场景，如组件内部和全局守卫，以及路由元信息和查询参数的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、组件

1、<router-link> 切换路由

to="/user" 切换路由的地址

<router-view> 存放路由

	<router-view></router-view>
	<!-- router-link  切换页面的组件 相当于a标签 -->
	<router-link to="/">首页</router-link>

2、路由配置 /router/index

//普通
{
    path:"/user",
    name:"user",
    component:()=>import(xxx)
}
//传参
{
    path:"/product/:id",
    name:"product",
    component:()=>import(xxx)
}
<router-link to="/product/abc"></router-link>
//在页面中获取 $route.params.id
//404
//要配置在最后面
{
    path:“*”,
}

3、编程式路由跳转$router

前进 forward() go(1)

后退 back() go(-1)

切换路由 push("/about")

替换路由(不留当前页面历史记录) replace("/about")

4、路由信息$route

路由参数 params

查询 query

地址 path

名称 name

哈希值 hash

全地址 fullPath

5、路由守卫

1.组件内部

进入前 beforeRouterEnter(to,from,next)

//to要进入的路由
//from 从哪个页面进入
//next 下一步
//next() 进入to页面
//next(true) 进入to页面
//next(false) 不跳转
//next("/login") 跳转到登录页面

离开前 beforeRouterLeave

更新前 beforeRouterUpdate

2.全局

beforeEnter((to,from.next)=>{})

afterEnter

3.独享

beforeRnter() 作用：进入离开页面前做拦截，处理事情(跳转提示，权限检查)

6、路由元信息

{
    path:path,name,component,
    meta:{
        noFooter:true
    }
}
//$route.meta.noFooter  范围

7、路由查询参数

传递 next("/login?redirect=/cart")

获取 var redirect=this.$route