vue-router的基本介绍

vue-router

什么是路由

路由是一个网络工程里面的术语

路由就是通过网络把信息从源地址传输到目的地的活动 — 维基百科

后端路由

是url和后端逻辑的对应关系

前端路由

是url和组件的对应关系

前端路由核心就是改变url但是页面不进行整体的刷新

前端路由规则

url的hash

url的hash也就是锚点(#),本质上是改变window.location的href属性

我们可以直接通过location.hash来改变href 但不刷新页面

vue-router

vue-router是vue官方的路由插件 它和vue.js是深度集成的，适合用于构建单页面应用

官网 https://router.vuejs.org/zh/

vue是基于路由的组件的

路由用于设定访问路径，将路径和组件映射起来

在vue-router的单页面应用中，页面的路径改变就是组建的切换

引用

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- vue-router是vue.js的插件  依赖于vue -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

vue-router创建实例

移动端底部菜单切换

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        a{
            color: #333;
            text-decoration: none;
        }
        .box {
            width: 100vw;
            height: 100vh;
            margin-bottom: 60px;
        }
        .mHome{
            background-color: pink;
        }
        .mType{
            background-color: skyblue;
        }

        .mDiscover{
            background-color: tomato;
        }
        .mCart{
            background-color: yellowgreen;
        }
        .mMy{
            background-color: darkorange;
        }

        .commonNav{
            width: 100vw;
            height: 50px;
            background-color: #fff;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
            box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
            z-index: 999;
        }
        .commonNav a{
            flex: 1;
            text-align: center;
            line-height: 50px;
        }
        .router-link-active{
            color: red;
        }
    </style>

<div id="app">
    <router-view></router-view>
<div class="commonNav">
    <router-link to="/tab1">首页</router-link>
<router-link to="/tab2">分类</router-link>
<router-link to="/tab3">惊喜</router-link>
<router-link to="/tab4">购物车</router-link>
<router-link to="/tab5">未登录</router-link>
</div>
</div>

<script>
        // 1.定义路由组件
        const mHome = Vue.component("mHome", { template: "<div class='box mHome'></div>" })
        const mType = Vue.component("mType", { template: "<div class='box mType'></div>" })
        const mDiscover = Vue.component("mDiscover", { template: "<div class='box mDiscover'></div>" })
        const mCart = Vue.component("mCart", { template: "<div class='box mCart'></div>" })
        const mMy = Vue.component("mMy", { template: "<div class='box mMy'></div>" })
        // 2.定义路由
        const routes = [
            // 默认路径
            { path: '/',redirect:'/tab1'},
            { path: '/tab1', name:"tab1", component: mHome },
            { path: '/tab2', name:"tab2", component: mType },
            { path: '/tab3', name:"tab3", component: mDiscover },
            { path: '/tab4', name:"tab4", component: mCart },
            { path: '/tab5', name:"tab5", component: mMy }
        ]
        // 3.创建router实例
        const router = new VueRouter({
            routes
        })
        // 4.创建和挂载根实例
        // 将router对象和顶级vue实例关联
        const app = new Vue({
            router
        }).$mount('#app')
    </script>