美文网首页
vue-router 路由写法

vue-router 路由写法

作者: 若水亦城空 | 来源:发表于2019-12-20 14:12 被阅读0次

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;

相关文章

  • vue-cli的路由警告问题

    问题一: 在Vue的项目中使用了Vue-Router,当某个路由有子级路由时,如下写法: 如果写法是如上的写法,就...

  • 8月第二周

    8.7 vue-cli vue-router 用法总结: 包含默认路由的地址写法,父子路由的嵌套,redirec...

  • vue-router 路由写法

    vue $route 深度监听

  • 手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

    Vue-Router 原理实现 一、Vue-Router 动态路由 二、Vue-Router 嵌套路由 三、Vue...

  • 10个Vue开发技巧

    参考文章:10个Vue开发技巧 一、路由参数解耦 知道这个写法,但是没有使用过,可参考笔记vue-router五。...

  • vue-router学习总结

    1.引入vue-router npm install vue-router --save 2.设置路由(1)路由实...

  • 2018-09-24 vue.js vue-router

    vue-router Vue路由器 Git 安装 npm install vue-router 路由中有三个...

  • 路由

    路由map 路由视图 路由导航 实现简单路由 import VueRouter from 'vue-router'...

  • vue路由

    路由:vue-router 案例: 1.路由 2.路由的嵌套

  • Vue 基础 - 前端路由

    使用vue-router实现前端路由 安装vue-router: 配置路由文件,并在vue实例中导入: 设置视图(...

网友评论

      本文标题:vue-router 路由写法

      本文链接:https://www.haomeiwen.com/subject/gyfinctx.html