17 Vue路由编程式的导航以及vue路由History 模式 hash 模式

原创于 2019-07-16 10:11:43 发布 · 275 阅读

CC 4.0 BY-SA版权

26 篇文章

订阅专栏

本文介绍Vue中编程式导航的两种方法及History和Hash模式的使用。通过this.$router.push的不同参数配置，实现页面间的跳转。同时，对比了History模式与Hash模式下Vue路由的实例化区别。

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

编程式导航，使用js实现路由跳转

一种跳转方式：

this.$router.push('/news');
this.$router.push('content/499');

另一种跳转方式：

{ path: '/news', component: News, name: 'news'},

this.$router.push({ name: 'news'});

//实例化VueRouter
const router = new VueRouter({
	mode: 'history', /*hash模式改为history*/
	routes  //缩写 相当于routes: routes
})

从而实现漂亮的url访问路径
在这里插入图片描述