Vue router2.0

Vue router2.0对于单页面来说路由是我们常用切换页面的一种方式,使用Vue安装npminstallvue-router–save路由的引入importrouterfrom’./router’/*eslint-disableno-new*/newVue({el:’#app’,store,router,components:{App},template:'<App/>’})路由的配置通过和也可以实现我们像a标签一样

大家好,又见面了,我是你们的朋友全栈君。

对于单页面来说路由是我们常用切换页面的一种方式,
使用Vue安装 npm install vue-router --save

路由的引入

import router from './router'
/* eslint-disable no-new */
new Vue({ 
   
  el: '#app',
  store,
  router,
  components: { 
   
    App
  },
  template: '<App/>'
})

路由的配置
在这里插入图片描述
通过和也可以实现我们像a标签一样跳转

路由的过度动画

这里是引用

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive></transition>
我们对路由的嵌套
const routes = [
  { 
   
    path: '/user/:id',
    component: User1,
    children: [
      { 
   
        path: 'profile',
        component: UserProfile,
      },
      { 
   
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]
$route.params.id获取参数
// 路由特有的守卫 to进入from 出去 next下一步
router.beforeEach((to, from, next) => { 
   
  if (to.name !== 'Login' && !isAuthenticated) next({ 
    name: 'Login' })
  next()
})
beforeRouteEnter (to, from, next) { 
   
}const UserDetails = { 
   
  template: `...`,
  beforeRouteEnter(to, from) { 
   
  },
  beforeRouteUpdate(to, from) { 
   
  },
  beforeRouteLeave(to, from) { 
   
  },
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157662.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C#中什么是泛型

    C#中什么是泛型参考视频c#教程泛型集合与非泛型集合最大的区别在于,泛型集合,不需要进行装箱和拆箱的操作。如集合元素为值类型,通常泛型集合要优于非泛型集合,并优于从非泛型集合派生出来的类型,泛是广泛的意思,而型是数据类型。这里的泛型可以理解为应用广泛的数据类型。为了提高性能及维护类型安全,一般最好采用泛型集合。如果两个类的内容完全一样,只是处理的数据类型不同。那么,采用泛型是一个不错的选择。泛型类用于封装不是特定于具体数据类型的操作,通常用于集合。诸如从集合中添加和移除项这样的操作都以大体上相同的方式执行,与所存

  • 关于c++杀线程函数TerminateThread强烈不建议使用

     TerminateThread强烈不建议使用,因为这个函数的执行是异步的,你无法保证调用之后会立即退出,同时线程的堆栈均不会被销毁,导致内存泄露。如果调用了这个函数,请确保使用WaitForSingleObject来等待线程对象的结束。  参考链接:https://blog.csdn.net/kofandlizi/article/details/6458011https…

  • Linux防火墙命令大全「建议收藏」

    Linux防火墙命令大全「建议收藏」原:https://blog.csdn.net/zhang123456456/article/details/781492061、firewalld的基本使用启动:systemctlstartfirewalld查看状态:systemctlstatusfirewalld停止:systemctldisablefirewalld禁用:systemctlstop…

  • OpenHarmonyOS for Hi3516dv300[通俗易懂]

    OpenHarmonyOS for Hi3516dv300[通俗易懂]OpenHarmonyOSforHi3516dv300一、安装dockermkdiropenHarmonycdopenHarmonysudosnapinstalldocker#获取docker镜像sudodockerpullswr.cn-south-1.myhuaweicloud.com/openharmony-docker/openharmony-docker-standard:0.0.1#运行镜像sudodockerrun-it-v$(pwd):/h

  • WebApp开发实战视频教程「建议收藏」

    WebApp开发实战视频教程「建议收藏」商品配送系统手机WebApp开发(Asp.NetMVC5、HTML5、jQueryMobile、Backbone)适合人群:中级课时数量:18课时用到技术:Asp.NetMVC5、HTML5、jQueryMobile、Backbone涉及项目:手机WebApp、消息推送、富文本编辑、后台接单咨询QQ:18402155921.课程研发环境操作系统:Windows

  • gitlab注册收不到邮件_matlab收不到邮件

    gitlab注册收不到邮件_matlab收不到邮件gitlab安装在ubuntu系统上(腾讯云上),在/etc/gitlab/gitlab.rb配置发送邮件的邮箱。gitlab_rails[‘smtp_address’]=”smtp.163.com”gitlab_rails[‘smtp_port’]=25gitlab_rails[‘smtp_tls’]=false其他配置略。之前是可以发送邮件的。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号