VueRouter的进阶使用

最新推荐文章于 2026-06-30 00:30:24 发布

原创最新推荐文章于 2026-06-30 00:30:24 发布 · 685 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端框架

Vue

本文介绍Vue.js中的路由配置方法，包括命名路由、参数传递、路由重定向等核心概念。通过实例展示了如何设置路径别名、使用props传参及进行编程式导航。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

命名路由

const routes = [
	{	
		// 路由参数，user_id
		path: "/user/:user_id",
		// 给路由起别名
		name: "user",
		component: User,
		// 使用props 传参
		props: true，
	}
]

使用路由

<div>
      <router-link to="/">主页</router-link>
      <!--params 传参数-->
      <router-link :to="{name: user, params: {user_id:'00123'}}">用户页</router-link>
      <router-link to="/sports">体育</router-link>
</div>
<div>
    <router-view></router-view>
</div>

user页面

<div class="user">
	<h3>user 页面</h3>
    <p>{{$route.params.user_id}}</p>
</div>

props 传参

**注意使用props传参，在路由规则开启 ** props:true，

{path: '/user/:user_id', component: User, props:true}

<router-link :to="{path: '/user/:user_id', params: { id: 'a2b3c2' } }"
        >关于</router-link
      >

<template>
    <div class="user">
        <h3>user 页面</h3>
        <p>{{user_id}}</p>
    </div>
</template>
<script>

    
export default {
  props: ["user_id"]
};
</script>

路由重定向

用户访问/a 时，url会替换成/b,然后匹配路由为/b

const router = new VueRouter({
	routes: [
		{path: '/a', redirect: '/b'}
	]
})

获取路由中的参数

传参

<router-link to="/home?name=jack&age=18">主页</router-link>

// 方法二 
<router-link :to="{path: '/home', query: (name:'jack',age:18)}">用户页</router-link>

取出传参

<template>
    <div class="home">
        <h3>home 页面</h3>
        <!--$route.query 是个对象-->
        <p>我叫{{$route.query.name}},年龄{{$route.query.age}}</p>
    </div>
</template>

编程式导航

methods: {
	handleClick(){
		this.$router.push("/about")   跳转到指定hash地址，并增加一条历史记录
		this.$router.replace("/about")		 跳转到指定hash地址，并替换一条历史记录
		this.$router.go(-1)		// 后退 括号中 数值
		this.$router.back()		// 后退
	}
}