vuecli2和vuecli3路由搭建和使用

一、安装路由vue-router

npm install - -save vue-router 或者

cnpm install - -save vue-router

二、创建存放路由组件的文件夹

注意：components文件夹里面一般放置的是非路由组件和共用的全局租价

路由组件可以创建文件夹如views、pages或者其它（自命名）文件夹中（为什么不用router这个名字？因为router文件夹里面一般用来存放路由的配置文件）

在里面.vue里面随便写点内容

三、配置路由

创建router文件夹用来存放路由配置文件

创建router.js来配置路由（这里可以更改其它名字如index.js等等）

配置内容：

配置路由的地方

引入vue和vue-router(路由，引入使用路由)

import Vue from 'vue'

import VueRouter from 'vue-router'

//使用路由

Vue.use(VueRouter)

引入路由组件

一个路由文件夹下一般只会存放一个路由组件所以找到这个文件夹即可

 import Home from '../views/Home/index.vue'

 import Login from '@/views/Login'

暴露一下router用来使用

export default new Router({

  //配置对象（路由）

    routes: [

      {

        //路径

        path:'/', //会默认显示这个

         name:'home',

        //那一个组件

        component:Home

      },

      {

        path:'/login',

        name:'login',

        component:Login

      }

    ]

  })

四、在入口文件（main.js）中引用和注册

//引入路由 注意单词要小写

//import router from '@/router'

import router from '@/router/router.js'

//                             注册路由

createApp(App).use(ElementPlus).use(router).mount('#app')

五、在根组件中配置路由出口

 

 

vuecli3

3和2的配置不同所以把配置文件改一下就好

//组件地址

import Home from '@/views/Home'

 import Login from '@/views/Login'

//配置文件

import { createRouter, createWebHistory } from 'vue-router'

const routerHistory = createWebHistory()

const routes=[

  {

    path:'/',

    //重定向（网页打开的时候显示那个内容）

    redirect:"/home"

  },

  {

    //定义路径用于切换

    path:'/home',

    name:'home',

    component:Home

  },

  {

    path:'/login',

    name:'login',

    component:Login

  }

]

const router = createRouter({

  history: routerHistory,

  routes

})

export default router