VueRouter3总结

知识点：

配置路由：第一步安装！ 不行可以指定版本：

npm install --legacy-peer-deps vue-router@3.5.2

首先我们要 创建一个 router.js文件

1. 引入Vue 引入VueRouter 将 VueRouter  use到Vue上

2. // 引入Vue
   import Vue from "vue";
   // 引入VueRouter
   import VueRouter from "vue-router";
   // 将VueRouter挂在到Vue上
   Vue.use(VueRouter);

3. 配置路径

4. import itemOne from "@/components/itemOne";
   import itemTwo from "@/components/itemTwo";
   
   // 配置路径
   const routes = [
     { path: "/", component: itemOne },
     { path: "/itemOne", component: itemOne },
     { path: "/itemTwo", component: itemTwo },
   ];

   首先要引入文件夹， 在配置routes 注意是一个对象形式 里面的 path代表自定义路径名字，component:代表import 引进来的文件名字。

5. new 一个VueRouter({  }) 这里面参数 第一个是routes 配置的路径 mode:路径的模式

6. const router = new VueRouter({ routes: routes, mode: "history" });

   1.hash  显示的网络路径中会有#号，这是最安全的模式，因为他兼容所有的浏览器和服务器  2.history 路径中会去掉 # 号 注意IE9一下的版本                                                                      3.abstract  适用于全部的JavaScript环境。 列如服务端使用Node.js

7. 最后导出router 

8. 在main.js 里面引入 router             后在new Vue 上面使用 router

9. //用来跳转页面  类似于a 但页面跳转页面不会刷新
   <router-link to="/itemOne">跳转</router-link>
   //用来存放跳转的页面
   <router-view></router-view>