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)


相关推荐

发表回复

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

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