Vue Router系列之（二）Vue Router的使用步骤

使用步骤

1. 安装vue-router，命令：npm i vue-router

2. 导入并应用插件

   // main.js
   import VueRouter from 'vue-router'
   Vue.use(VueRouter)
   

3. 创建src/router/index.js，该文件专门用于创建整个应用的路由器

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入About、Home组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
   

4. 创建Vue实例时指定router配置项，值为步骤三中创建的index.js

   //引入路由器
   //引入router，如果创建的文件名是index.js，引入的路径中可以不用具体到文件名，默认就会找index.js
   import router from './router'
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	// 引入VueRouter并应用插件后，可以使用router配置项
   	router:router
   })
   

5. 借助router-link标签实现路由的切换（active-class可配置高亮样式）【这样就不需要我们手动切换访问的路径实现访问不同的组件】

   <!--router-link标签最终会变成a标签，如果是按钮实现的跳转，是不可以使用该标签实现的-->
   <!--active-class：当前元素被激活时会为当前元素添加类名-->
   <!--to：值为路由器中配置的每一个路由的path-->
   <router-link active-class="active" to="/about">About</router-link>
   

6. 指定展示位置，当浏览器路径改变时，vue-router会根据路由找到对应的组件并显示在该位置

   <router-view></router-view>
   

多页面应用改造为单页面应用

1. 找出导航区和展示区
2. 将其中一个html的body部分中的内容放到App中

项目启动后，控制台出现如下报错

"export 'default' (imported as 'VueRouter') was not found in 'vue-router'

浏览器控制台出现如下报错，说明使用的vue-router版本过高，vue2对应vue-router 3版本

注：vue-router 3中没有VueRouter构造函数了

vue与vue-router的版本对应关系如下

vue 2 对应 vue-router 3

vue 3 对应 vue-router 4

卸载当前版本的vue-router，安装vue-router 3即可

npm uninstall vue-router
npm i vue-router@3