知识点:
配置路由:第一步安装! 不行可以指定版本:
npm install --legacy-peer-deps vue-router@3.5.2
首先我们要 创建一个 router.js文件
- 引入Vue 引入VueRouter 将 VueRouter use到Vue上
-
// 引入Vue import Vue from "vue"; // 引入VueRouter import VueRouter from "vue-router"; // 将VueRouter挂在到Vue上 Vue.use(VueRouter);
- 配置路径
-
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 引进来的文件名字。
- new 一个VueRouter({ }) 这里面参数 第一个是routes 配置的路径 mode:路径的模式
-
const router = new VueRouter({ routes: routes, mode: "history" });
1.hash 显示的网络路径中会有#号,这是最安全的模式,因为他兼容所有的浏览器和服务器 2.history 路径中会去掉 # 号 注意IE9一下的版本 3.abstract 适用于全部的JavaScript环境。 列如服务端使用Node.js
-
最后导出router
-
在main.js 里面引入 router 后在new Vue 上面使用 router
-
//用来跳转页面 类似于a 但页面跳转页面不会刷新 <router-link to="/itemOne">跳转</router-link> //用来存放跳转的页面 <router-view></router-view>