[JavaScript知识库] Vue router2.0

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue router2.0 -> 正文阅读

[JavaScript知识库]Vue router2.0

对于单页面来说路由是我们常用切换页面的一种方式，
使用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) {
  },
}