欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue学习之路由vue-router小结（九）

程序员文章站 2023-01-01 13:27:19
一、路由： 1、后端路由： 对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2、前端路由： 对于单页面应用程序来说，主要通过URL中的hash(#号）来实现不同页面之间的切换，同时，hash之间有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程 ......

一、路由：

1、后端路由：

　　对于普通网站，所有的超链接都是url地址，所有的url地址都对应服务器上对应的资源；

2、前端路由：

　　对于单页面应用程序来说，主要通过url中的hash(#号）来实现不同页面之间的切换，同时，hash之间有一个特点：http请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

3、在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由！！！

二、安装：

官网：https://router.vuejs.org/zh/installation.html

js：

三、使用：

1、导入及创建对象：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>路由</title>
    <script src="./lib/vue.js"></script>
    <!-- 1.安装vue-router路由模块 -->
    <script src="./lib/vue-router.js"></script>
    <style></style>
  </head>
  <body>
    <div id="app">
      <!-- <a href="#/login">登录</a>
      <a href="#/register">注册</a> -->

      <!-- router-link 默认渲染成一个 a 标签 -->
      <router-link to="/login" tag="span">登录</router-link>
      <router-link to="/register">注册</router-link>

      <!-- 这是 vue-router 提供的元素，专门用来当做占位符的，将来，
      路由规则，匹配到的组件，就会展示到这个 router-view 中去-->
      <!-- 我们可以把 router-view 认为是一个占位符 “ 留坑” -->
      <router-view></router-view>
    </div>

    <script>
      var login = {
        template: "<h1>登录组件</h1>"
      };
      var register = {
        template: "<h1>注册组件</h1>"
      };
      // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了
      //一个路由的构造函数，叫做 vuerouter
      // 在new 路由对象的时候，可以为 构造函数，传递一个配置对象
      var routerobj = new vuerouter({
        // route 这个配置对象中的 route 表示【路由匹配规则】的意思
        routes: [
          //路由匹配规则
          // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
          // 属性1：path 表示监听哪个路由链接地址
          // 属性2： component 表示，如果路由是前面匹配到的 path，则展示 component 属性对应的那个组件
          //component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称
          { path: "/login", component: login },
          { path: "/register", component: register }
        ]
      });
      var vm = new vue({
        el: "#app",
        data: {},
        methods: {},
        // 将路由规则对象，注册到vm 实例上，用来监听 url地址的变化，然后展示对应的组件
        router: routerobj
      });
    </script>
  </body>
</html>

 2、重定向（打开时默认导向的位置：可以在地址栏上查看区别）

 { path: "/", redirect: "/login" },

例子中，是默认打开时就导向login页面

3、设置路由高亮的方式（两种：第二种直接样式里定义即可）：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>路由</title>
    <script src="./lib/vue.js"></script>
    <!-- 1.安装vue-router路由模块 -->
    <script src="./lib/vue-router.js"></script>
    <style>
      /* 2.第二种设置路由高亮的方式---直接设置，不需要再定义 */
      .router-link-active {
        color: red;
        font-weight: 800;
        font-style: italic;
        font-size: 80px;
        text-decoration: underline;
        background-color: green;
      }
      /* 1.1第一种设置路由高亮的方式--需要定义下 */
      .myactive {
        color: red;
        font-weight: 800;
        font-style: italic;
        font-size: 80px;
        text-decoration: underline;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <a href="#/login">登录</a>
      <a href="#/register">注册</a> -->

      <!-- router-link 默认渲染成一个 a 标签 -->
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>

      <!-- 这是 vue-router 提供的元素，专门用来当做占位符的，将来，
      路由规则，匹配到的组件，就会展示到这个 router-view 中去-->
      <!-- 我们可以把 router-view 认为是一个占位符 “ 留坑” -->
      <router-view></router-view>
    </div>

    <script>
      var login = {
        template: "<h1>登录组件</h1>"
      };
      var register = {
        template: "<h1>注册组件</h1>"
      };
      // 2.创建一个路由对象，当导入 vue-router 包之后，在 window 全局对象中，就有了
      //一个路由的构造函数，叫做 vuerouter
      // 在new 路由对象的时候，可以为 构造函数，传递一个配置对象
      var routerobj = new vuerouter({
        // route 这个配置对象中的 route 表示【路由匹配规则】的意思
        routes: [
          //路由匹配规则
          // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
          // 属性1：path 表示监听哪个路由链接地址
          // 属性2： component 表示，如果路由是前面匹配到的 path，则展示 component 属性对应的那个组件
          //component 的属性值，必须是一个组件的模板对象，不能是组件的引用名称
          // redirect 是重定向，定义打开页面的默认的导向哪个页面，可以在地址栏中具体查看
          { path: "/", redirect: "/login" },
          { path: "/login", component: login },
          { path: "/register", component: register }
        ]
        // 1.2第一种设置路由高亮的方式--需要定义的部分
        //  linkactiveclass: "myactive"
      });
      var vm = new vue({
        el: "#app",
        data: {},
        methods: {},
        // 将路由规则对象，注册到vm 实例上，用来监听 url地址的变化，然后展示对应的组件
        router: routerobj
      });
    </script>
  </body>
</html>

 4、设置路由的动画：

样式内加上：

 .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translatex(150px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.8s ease;
      }

然后：

<transition mode="out-in">
        <router-view></router-view>
 </transition>

 

上一篇： jQuery火箭图标返回顶部代码

下一篇： 详解Vue中的虚拟DOM

推荐阅读