脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue路由的配置和页面切换

vue路由的配置和页面切换详解

 更新时间：2020年09月09日 11:09:45   作者：圣京都  
这篇文章主要给大家介绍了关于vue路由的配置和页面切换的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1.vue路由

可以实现单页面应用。

路由三要素：

vue路由通过hash的变化切换页面(组件/div)

<router-link>导航

<router-view>存储页面(组件）的容器

src/router/index.js路由的配置

实现步骤：

2.router配置

对router文件夹下的index.js进行配置

path：url

name：对应的参数的模块名称

component:组件名

用组件时一定要注册

 {
 path: '/product',
 name: 'Product',
 component: Product
 }

3.实现传参配置

配置

 {
 path: '/product/:id',
 name: 'Product',
 component: Product
 }

切换: <router-link to="/product/666">产品666</router-link>

接收: {{$route.params.id}}

4 子页面

配置

 {
 path: '/admin',
 name: 'Admin',
 component: Admin,
	children:[
		{path:"ucenter",component:Ucenter},
		{path:"activity",component:Activity},
		{path:"",redirect:"ucenter"}//重定向
	]
 },

重定向: {path:"",redirect:"ucenter"}

创建新的别名: alias:["/home","/main"]

切换: <router-link to="/admin/ucenter"></router-link>

5 页面切换

跳转：$router.go(-1)

后退：$router.back()

前进： ```$router.forward()``

新加历史记录切换页面：$router.push()

替换当前页面（不留历史记录）：$router.replace()

总结

到此这篇关于vue路由的配置和页面切换的文章就介绍到这了,更多相关vue路由的配置和页面切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 关于vue.extend和vue.component的区别浅析

    关于vue.extend和vue.component的区别浅析

    最近工作中遇到了vue.extend,vue.component，但二者之间的区别与联系是什么呢？下面这篇文章主要给大家介绍了关于vue.extend和vue.component区别的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-08-08
  • 浅谈Vue.js中如何实现自定义下拉菜单指令

    浅谈Vue.js中如何实现自定义下拉菜单指令

    这篇文章主要介绍了浅谈Vue.js中如何实现自定义下拉菜单指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue实现简单的购物车小案例

    vue实现简单的购物车小案例

    这篇文章主要为大家详细介绍了vue实现简单的购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • VUE中操作dom元素的几种方法(最新推荐)

    VUE中操作dom元素的几种方法(最新推荐)

    本文给大家总结了Vue中操作dom元素的多种方法，每种方法结合实例代码给大家讲解的非常详细，需要的朋友参考下吧
    2022-12-12
  • vue如何使用moment处理时间戳转换成日期或时间格式

    vue如何使用moment处理时间戳转换成日期或时间格式

    这篇文章主要给大家介绍了关于vue如何使用moment处理时间戳转换成日期或时间格式的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者vue具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • Vue3 style CSS 变量注入的实现

    Vue3 style CSS 变量注入的实现

    本文主要介绍了Vue3 style CSS 变量注入的实现，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • 详解Vue生命周期和MVVM框架

    详解Vue生命周期和MVVM框架

    MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想，这篇文章主要介绍了Vue生命周期和MVVM框架,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • vue-cli3.0实现一个多页面应用的历奇经历记录总结

    vue-cli3.0实现一个多页面应用的历奇经历记录总结

    这篇文章主要介绍了vue-cli3.0实现一个多页面应用的历奇经历,总结分析了vue-cli3.0实现一个多页面应用遇到的问题与相关操作注意事项,需要的朋友可以参考下
    2020-03-03
  • vue如何动态实时的显示时间浅析

    vue如何动态实时的显示时间浅析

    这篇文章主要给大家介绍了关于vue如何动态实时的显示时间，以及vue时间戳 获取本地时间实时更新的相关资料，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue axios库避免重复发送请求的示例介绍

    Vue axios库避免重复发送请求的示例介绍

    Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。axios是目前最优秀的HTTP请求库之一,我们封装axios请求也是为了让代码看的更加清晰,后期好维护
    2023-02-02

最新评论