router路由的简单用法

第一步：在路由组件中引入

import login from '../components/login.vue'

 {
    path:'/login',
    component:login
  },

 或者如下（推荐使用）懒加载

//此处@为从src开始寻找，import('@/viwes/login.vue')为组件的路径
{
    path: '/login',
    component: () => import('@/viwes/login.vue')
}

 第二步：<template>中使用如下

@click="$router.push('/home')"

 在JavaScript中使用

 this.$router.push({
    path: '/login',
    query:{
    //给下个页面传的参数
    }
})

跳转到的组件需要占位符

<router-view></router-view>