vue-router

最新推荐文章于 2022-12-10 16:48:09 发布

LH2HA3

最新推荐文章于 2022-12-10 16:48:09 发布

阅读量148

点赞数

分类专栏：督导系统复盘文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/LH2HA3/article/details/126058119

版权

督导系统复盘专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、在router.js文件中导入vue和vue-router以及要显示的页面的组件

import Vue from "vue";
import Router from "vue-router";
import BuildNotice from "../views/businessNotification/BuildNotice";
Vue.use(Router)

2、设置每个组件对应页面的的路由数组

export const constantRouterMap = [
  {
    path: "/",
    redirect: "/login"
  },
  {
    path: "/login",
    component: Login
  },
  {
    path: "/news",
    name: "news",
    component: News
  }
]

3、生成一个router对象

const router = new Router({
  mode: "history", // 设置路由模式 history
  base: process.env.BASE_URL,
  routes: constantRouterMap,
  // routes中配置的每个对象叫路由对象（route record）,路由记录是可嵌套，一个路由匹配成功后，可能匹配多个路由记录，比如/foo/bar 会匹配父路由记录和他的子路由记录
  // 这个路由匹配到的所有路由记录会放在 $route.matched 数组，可以遍历这个数组来检查路由记录中的 meta 字段
  // 比如在全局导航守卫中检查meta字段
  //每次进入页面时都初始化滚轴位置(固定用法)
  scrollBehavior(to, from, savedPosition) {
    return {
      x: 0,
      y: 0
    };
  }
});

更详细的可以参考：

Vue路由_大聪明码农徐的博客-CSDN博客_vue的路由