Vue のルーティング制御および管理テクノロジ

npm install vue-router –save

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

this.$router.push({
  path: '/posts/' + id
})