Vue-Router

最新推荐文章于 2024-11-29 09:12:36 发布

小森呀

最新推荐文章于 2024-11-29 09:12:36 发布

阅读量117

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/KEY2018/article/details/117267216

VUE 专栏收录该内容

22 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- tag:将router-link标签解析为什么标签、replace:浏览器页面设置为不能后退-->
    <router-link to="路径" tag="div" replace></router-link>
    <router-link to="{path:'路径',query:'{name:'Andy',age:18}'}"></router-link>
    <!-- 保持页面,include:需要保持页面的路由名字、exclude:不需要保持页面的路由名字 -->
    <keep-alive include="name1,name2" exclude="name1,name2">
      <router-view></router-view>
    </keep-alive>
    <router-view></router-view>
  </body>
  <script>
    new VueRouter({
      routes: [
        { path: "", redirect: "路径" }, //路径重定向
        { path: "路径", component: 组件名 }, //普通路由
        { path: "路径:userId", component: 组件名 }, //动态路由
        {
          path: "路径",
          component: 组件名,
          beforeEnter: (to, from, next) => {},
        }, //路由内置的导航守卫
        { path: "路径", component: 组件名, meta: { title: "首页" } }, //路由的元数据
        { path: "路径", component: () => import("组件路径") }, //路由懒加载
        { path: "路径", component: 组件名, children: [] }, //路由嵌套
      ],
      mode: "地址模式(hash模式、history模式)", //路由模式
      linkActiveClass: "", //路由活跃状态时添加的样式
    });
    //用代码进行路由跳转
    this.$router.push("路径");
    this.$router.replace("路径");
    // 获取参数
    this.$route.params.userId;
    this.$route.query;
    // 全局前置守卫
    router.beforeEach((to, from, next) => {
      next();
    });
    // 全局后置守卫
    router.afterEach((to, from) => {});
    // 与keep-alive配合使用，与methods是同级的
    // activated () {},
    // deactivated () {}
  </script>
</html>