VueRouter3总结

Source

知识点:

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

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

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

  1. 引入Vue 引入VueRouterVueRouter  useVue
  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>