首页 > > 网页制作 > css >

VueRouter认识

2019-08-14 09:46:42来源：博客园阅读 ()

1、什么是路由？

　　路由（vue-router）是负责将进入的浏览器请求映射到特定的 组件 代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

　　官方地址：https://router.vuejs.org/zh/

　　地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

2、路由的使用

　　　　注意：作为vue的插件，需要单独引入js文件，且必须在vue.js之后引入。

　　路由的使用步骤：
　　　　1、定义模板
　　　　2、定义组件
　　　　3、创建路由对象
　　　　4、将路由对象配置到vue实例中
　　　　5、路由调用：

　　　　　　　　<router-link to=“跳转路径”></router-link>：该标签会默认被解析成<a>标签

　　　　<router-view></router-view>：该标签用于展示组件中的内容，是路由的出口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
    <!-- ==============================5、使用路由==================================== -->        
        <div id="app">
            <!-- 使用 router-link 组件来导航：该标签默认会被解析成一个<a></a>标签 -->
            <!-- 通过传入 `to` 属性指定链接. -->

            <router-link to="/employee">员工管理</router-link>
            <router-link to="/department">部门管理</router-link>
            <router-link to="/storage">仓库管理</router-link>
            <hr />    <!--分隔线-->
            <router-view></router-view>  <!--路由出口：用于展示组件中的内容-->
            
        </div>
        
    <!-- ==============================1、定义组件模板==================================== -->    
            <template id="temp">
                <!--这个div是根标签-->
                <div>
                    <h1>员工管理</h1>
                    模板内容
                </div>
            </template>
            <template id="temp2">
                <!--这个div是根标签-->
                <div>
                    <h1>部门管理</h1>
                    模板内容
                </div>
            </template>
            <template id="temp3">
                <!--这个div是根标签-->
                <div>
                    <h1>仓库管理</h1>
                    模板内容
                </div>
            </template>
        
        <script type="text/javascript" src="js/vue.js" ></script>  <!--重点-->
        <!--vue路由必需js文件：要在vue.ja文件后面-->
        <script type="text/javascript" src="js/vue-router.js" ></script>　　<!--重点-->
        <script>
    /* =================================2、定义组件========================================== */
            var emp= Vue.component("compon1",{
                template:"#temp"
            })
            var depar = Vue.component("compon2",{
                template:"#temp2"
            })
            var stor = Vue.component("compon3",{
                template:"#temp3"
            })
    /* =======================3、创建路由对象=================================== */    
            var route = new VueRouter({
                routes:[
                    {
                        path:"/employee",    //路径
                        component:emp    //路由对应的资源（获取vue组件对象）
                    },
                    {
                        path:"/department",//路径
                        component:depar        //路由对应的资源（获取vue组件对象）
                    },
                    {
                        path:"/storage",    //路径
                        component:stor        //路由对应的资源（获取vue组件对象）
                    }
                ]
            })
    /* =======================4、将路由对象配置到vue实例中=================================== */        
            //挂载vue实例
            var app= new Vue({
                el:"#app",
                router:route
            })
            
        </script>
    </body>
</html>