vue-router 路由写法

vue $route 深度监听

 watch: {
    $route: {
      handler(to) {
        this.routechangeName = to.matched[0].redirect.name;
        console.log(this.routechangeName, to, "路由地址222");
      },
      deep: true,
      immediate: true
    }
  },
computed: {
    lockCookie() {
      return this.$store.state.user.token;
    },
    islogin() {
      return this.$store.state.user.isLogin;
    },
    User() {
      return this.$store.state.user;
    },
    routeName: function() {
      return this.$route;
    }
  },

d53e10cf32fe054e99ce1f660f33e246.png

import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "../views/layout.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: {
      name: "home"
    },
    component: Layout,
    meta: {
      hideInMenu: true,
      notCache: false,
      title: "首页"
    },
    children: [
      {
        path: "home",
        name: "home",
        meta: {
          title: "首页"
        },
        component: () => import("@/views/home/index.vue")
      },
      {
        path: "/NewList",
        name: "mewlist",
        meta: {
          title: "新闻详情"
        },
        component: () => import("@/components/HomeContent/NewList.vue")
      },
      {
        path: "/NewDetail",
        name: "NewDetail",
        meta: {
          title: "新闻详情"
        },
        component: () => import("@/components/HomeContent/NewDetail.vue")
      }
    ]
  },
  {
    path: "/",
    redirect: {
      name: "legalinstrum"
    },
    component: () => import("@/views/publicity/LayoutSynergy.vue"),
    meta: {
      title: "协同办案"
    },
    children: [
      {
        path: "legalinstrum",
        name: "legalinstrum",
        meta: {
          title: "协同办案"
        },
        component: () => import("@/views/publicity/legal-instrum.vue")
      }
    ]
  },
  {
    path: "/",
    redirect: {
      name: "interactivedetail"
    },
    component: () => import("../views/interactive/InteractiveList.vue"),
    meta: {},
    children: [
      {
        path: "interactivedetail",
        name: "interactivedetail",
        meta: {
          title: "互动交流"
        },
        component: () => import("@/views/interactive/InteractiveDetail.vue")
      },
      {
        path: "/addInteractive",
        name: "addInteractive",
        meta: {
          title: "新增互动"
        },
        component: () => import("@/views/interactive/AddInteractive.vue")
      }
    ]
  },
  {
    path: "/",
    redirect: {
      path: "resourcesdirectory",
      name: "resourcesdirectory"
    },
    component: () => import("../views/directory/directory.vue"),
    meta: {},
    children: [
      {
        path: "resourcesdirectory",
        name: "resourcesdirectory",
        meta: {
          title: "资源目录"
        },
        component: () => import("@/views/directory/ResourcesDirectory.vue")
      }
    ]
  },
  
  {
    path: "/login",
    name: "login",
    component: () => import("../views/login-form.vue"),
    meta: {
      hideInMenu: true,
      notCache: false,
      title: "登录"
    }
  },
  {
    path: "/conlogin",
    name: "conlogin",
    component: () => import("../views/conlogin.vue"),
    meta: {
      hideInMenu: true,
      notCache: false,
      title: "登录"
    }
  }
];

const router = new VueRouter({
  routes
});

export default router;