介绍
这篇文章运用简单易懂的例子给大家介绍在vue中如何配置页面切换和路由,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
可以实现单页面应用。
路由三要素:
vue路由通过散列的变化切换页面(组件/div)
& lt; router-link>导航
& lt; router-view>存储页面(组件)的容器
src/路由器/索引。js路由的配置
实现步骤:
对路由器文件夹下的指数。js进行配置
路径:url
名称:对应的参数的模块名称
组件:组件名
用组件时一定要注册
{
路径:& # 39;/产品# 39;
名称:& # 39;产品# 39;
产品组件:
}
配置
{
路径:& # 39;/产品/:id # 39;
名称:& # 39;产品# 39;
产品组件:
} 切换:<代码> & lt; router-link=?产品/666“在产品666 & lt;/router-link>
接收:<代码> {{route.params美元。id}}
配置
{
路径:& # 39;/行政与# 39;
名称:& # 39;行政与# 39;
组件:管理,
孩子:(
{路径:“ucenter",组件:Ucenter},
{路径:“activity",组件:活动},
{路径:““,重定向:“ucenter"}//重定向
]
}, 重定向:<代码>{路径:““,重定向:“ucenter"}
创建新的别名:<代码>别名:[“/home",“/main"]
切换:<代码> & lt; router-link=?admin/ucenter"祝辞& lt;/router-link>
跳转:<代码> router.go美元(1)
后退:<代码> router.back美元()
前进:<代码> ' ' '美元router.forward() ' '
新加历史记录切换页面:<代码> router.push美元()
替换当前页面(不留历史记录):<代码> router.replace美元()
关于在vue中如何配置页面切换和路由就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
