vue-router的使用

路由: 指向,将一个地址指向对应的一个组件

router: 路由的实例化对象

route:提供当前路由的基本信息

1. 安装

yarn add vue-router

2.在src/router/index.js中导入路由

import VueRouter from 'vue-router'

3.注册

import Vue form 'vue
Vue.use(VueRouter)

4.实例化

  const router=new VueRouter({
      routes:[
          {
              path,
              name,
              meta, -----路由元
              component,
              components:{
                 default:默认组件，等效于上面的component：组件 ,
                 xxx:对应xxx组件   ，router-view  name="xxx"
              }
              redirect, ----重定向
              children,
              alias-----别名
          }          
      ]
  })

创建路由规则数组

const routes = new VueRouter({
routes:[
    // 登录页 
  {
    // 这里的名字是我们要在浏览器上输入的路径
    path: "/login",
    name: "login"
    component: () => import('@/views/login/index'),
    hidden: true,
    mate: {
      noLogin: true
    }
  },
    // 404页
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true,
    mate: {
      noLogin: true
    }
  },
     // 首页
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
     // 导航栏中与首页同等级的页面
  {
    path: '/departments',
    component: Layout,
    children: [
      {
        path: '', 
        name: 'departments',
        component: () => import('@/views/departments/index'),
        meta: { title: '组织架构', icon: 'tree' }
      }
    ]
  },
]
})

5.暴露出去

export default router

6.关联到vue实例,挂载

import router from '@/router'
new Vue({
  router
})

7. 路由出口

在components组件中换成router-view

<router-view></router-view>

 8. 有二级路由的情况下

import Vue from 'vue'
import VueRouter from 'vue-router'
// import login from '../views/login/login.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/login', // 这里的名字就是要在浏览器上输入的路径
    name: 'login',
    // component: login
    component: () => import('../views/login/login.vue')
  },
  {
    path: '/reg',
    name: 'reg',
    component: () => import('../views/Reg/reg.vue')
  },
// resetPwd avatar是一个页面下的两个二级路由, 写在children 里面
  {
    path: '/', // 如果这里只写一个 /, 下面的就不写/,如果这里写/Layout,下面就写/ArtCategory
    component: () => import('../views/Layout/index.vue'),
    children: [
      { path: '', component: () => import('../views/Home/index.vue') },
      {
        path: 'resetPwd',
        name: 'resetPwd',
        component: () => import('../views/user/resetPwd.vue')
      },
      {
        path: 'avatar',
        name: 'avatar',
        component: () => import('../views/user/avatar.vue')
      }

    ]

  }
]
const router = new VueRouter({
  routes
})
export default router