1.Vue学习路由的基本使用

1。执行npm i vue-router  命令安装vue路由（注需要管理员运行的cmd中运行）

2.2022年2月7日以后，vue-router的默认版本，为4版本，vue-router4，只能用在vue3中。

vue-router3。才能用在vue2中。

目前学习实验代码是vue2，所以安装vue-router3

npm i vue-router@3

3.在vue项目的main.js中引入

//引入VueRouter

import VueRouter from 'vue-router'

4.应用插件

//应用插件

Vue.use(VueRouter)

5.需要在src下面创建

router文件夹，并创建一个index.js文件 

 6.在index.js中配置相关的路由信息，如下图代码

//该文件专门用于创建整个应用的路由器

import VueRouter from 'vue-router'

import About from '../components/About'

import Home from '../components/Home'

 

//创建并暴露一个路由器

export default  new VueRouter({

    routes:[

        {

            path:'/about',

            component:About

        },

        {

            path:'/home',

            component:Home

        },

    ]

})

6.在项目的main.js中引入路由器

//引入路由器

import router from './router'

//创建vm

new Vue({

    el:'#app',

    render: h => h(App),

    router:router

})

路由需要注意的点

1.pages里面存放路由组件

2.components里面存放一般组件

 多级路由