vue-router 路由

时光流逝·

于 2022-08-06 09:17:37 发布

阅读量937

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：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:“*”,
}