router 路由

最新推荐文章于 2025-01-08 00:03:31 发布

原创最新推荐文章于 2025-01-08 00:03:31 发布 · 845 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

59 篇文章

订阅专栏

什么是路由：

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转；

　　routes：表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合；是路由对象的集合路由对象包含了页面的路由相关的所有的信息，一个路由其实是一个页面的跳转链接

　　router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时候，这个时候router就会去routes中去查找route，就是说路由器会去路由集合中找对应的路由；

<!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>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
    <div id="app">
            <!-- 渲染路由组件的标签 -->
        <router-view></router-view>
    </div>
    <script>
        const com = {
            template: `
                <div>认识路由</div>
            `
        }
        // 实例化路由对象
        var router = new VueRouter({
            routes: [
                {
                    path: '/', // 页面链接的路径 '/'表示默认渲染的路由组件 路由地址和浏览器上的链接地址匹配上的时候会把组件替换掉 router-view
                    component: com
                }
            ]
        })
        var vm=new Vue({
           el:'#app',
           router,  //// 将路由的实例化对象和vue实例化对象关联起来
           data:{},
           methods:{}
        });
    </script>
</body>
</html>

饿了么路由实例：

<!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>Document</title>
  <style>
    html,body{
      margin: 0;
      height: 100%;
    }
    #app {
      height: 100%;
    }
    .container{
      height: calc(100% - 50px);
      overflow: auto;
    }
    .nav_box{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      align-items: center;
      height: 50px;
    }
    /* .active {
      color: red;
    } */
    .isActive {
      color: blue;
    }
  </style>
</head>
<body>
  <div id="app">
  
    <div class="container">
      <router-view></router-view>
    </div>
    <!-- 
      router-link是路由跳转的标签 它默认会转化成a标签 可以通过tag属性自定以标签
      to属性是跳转到的页面的路由对象或者path地址
      -->
    <ul class="nav_box">
    <!-- 
    active-class 
    是路由匹配到了当前路由就会添加他对应的值到class中
    他的默认值是router-link-active
    exact-active-class 是路由精确匹配 只有当前路由地址跟path的值完全相等的时候会将他的值添加进入class中
    他的默认值是router-link-exact-active
     -->
      <router-link tag="li" active-class="active" exact-active-class="isActive" to="/">首页</router-link>
      <router-link tag="li" active-class="active" exact-active-class="isActive" to="/discover">发现</router-link>
      <router-link tag="li" active-class="active" exact-active-class="isActive" to="/order">订单</router-link>
      <router-link tag="li" active-class="active" exact-active-class="isActive" to="/profile">我的</router-link>
    </ul>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./js/vue-router.js"></script>
  <script>
    var Index = {
      template: `
        <div>首页</div>
      `
    }
    var Discover = {
       template: `
        <div>发现</div>
      `
    }
    var Order = {
      template: `
        <div>订单</div>
      `
    }
    var Profile = {
       template: `
        <div>我的</div>
      `
    }
    const routes = [
      {
        path: '/',
        component: Index
      },
      {
        path: '/discover',
        component: Discover
      },
      {
        path: '/discover/order',
        component: Order
      },
      {
        path: '/profile',
        component: Profile
      }
    ]
    let router = new VueRouter({
      routes
    })
    new Vue({
      el: "#app",
      router,
      data: {}
    })
  </script>
</body>
</html>

小米商城路由分析：

<!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>Document</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html , body {
            height: 100%;
            margin: 0;
        }
        #app , #nav_com {
            height: 100%;
        }
        .content {
            height: calc(100% - 40px);
        }
        .tab_list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 40px;
            overflow: auto;
        }
        .active {
            color: #ff6700
        }
    </style>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script>
        const com_nav = {
            template: `
                <div id="nav_com">
                    <div class="content">
                        <router-view></router-view>
                    </div>
                    <div>
                        <ul class="tab_list">
                            <router-link tag="li" to="/index" exact-active-class="active">首页</router-link>
                            <router-link tag="li" to="/types" exact-active-class="active">分类</router-link>
                            <router-link tag="li" to="/start" exact-active-class="active">星球</router-link>
                            <router-link tag="li" to="/car" exact-active-class="active">购物车</router-link>
                            <router-link tag="li" to="/profile" exact-active-class="active">我的</router-link>
                        </ul>
                    </div>
                </div>
            `
        }

        // 定义组件
        const vip = {
            template: `
                <div>这是会员中心
                    <router-link tag="li" to="/index">返回首页</router-link>
                </div>
            `
        }
        const Index = {
            template: `
                <div>这是首页</div>
            `
        }
        const Type = {
            template: `
                <div>这是分类</div>
            `
        } 
        const Start = {
            template: `
                <div>这是星球</div>
            `
        }
        const Car = {
            template: `
                <div>这是购物车</div>
            `
        }
        const Profile = {
            template: `
                <div>
                    <p>这是我的</p>
                    <p>
                        <router-link tag="li" to="/vip">会员中心</router-link>
                    </p>
                </div>
            `
        }

        const routes = [
            {
                path: '/',
                component: com_nav,
                redirect: '/index',  //redirect: 路由路径重定向
                children: [  // children是路由的子路由 它里面是子路由的路由对象集合
                    {
                        path: 'index',
                        component: Index
                    },
                    {
                        path:'types',
                        component: Type
                    },
                    {
                        path:'start',
                        component: Start
                    },
                    {
                        path:'car',
                        component: Car
                    },
                    {
                        path:'profile',
                        component: Profile
                    }
                ]
            },
            {
                path: '/vip',
                component: vip
            }
        ]
        let router = new VueRouter({
            routes
        })
        var vm=new Vue({
           el:'#app',
           router,
           data:{},
           methods:{}
        });
    </script>
</body>

</html>