vue实现页面跳转路由

vue-router 基础使用

安装 vue-router 依赖包

npm install vue-router

在 main.js 或 router/index.js 中配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

声明式导航

在模板中使用 <router-link> 组件

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

添加 active 样式类

<router-link to="/about" active-class="active-link">关于</router-link>

编程式导航

在方法中使用 $router API

methods: {
  goToHome() {
    this.$router.push('/')
  },
  goToAbout() {
    this.$router.push('/about')
  }
}

使用命名路由

this.$router.push({ name: 'user', params: { userId: '123' } })

路由传参

通过 params 传递参数

// 路由配置
{ path: '/user/:userId', component: User }

// 导航方式
this.$router.push('/user/123')

通过 query 传递参数

this.$router.push({ path: '/user', query: { id: '123' } })

在组件中获取参数

this.$route.params.userId
this.$route.query.id

路由守卫

全局前置守卫

router.beforeEach((to, from, next) => {
  // 登录验证逻辑
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

组件内守卫

beforeRouteEnter(to, from, next) {
  // 在渲染该组件的对应路由被确认前调用
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

动态路由

添加动态路由

router.addRoute({
  path: '/new-route',
  component: NewComponent
})

删除路由

router.removeRoute('route-name')

路由懒加载

使用 import() 实现懒加载

const User = () => import('./views/User.vue')

const router = new VueRouter({
  routes: [{ path: '/user', component: User }]
})

嵌套路由

配置嵌套路由

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      { path: 'profile', component: Profile },
      { path: 'posts', component: Posts }
    ]
  }
]

在父组件中添加 <router-view>

<div class="user">
  <h2>User {{ $route.params.id }}</h2>
  <router-view></router-view>
</div>