VueRouter认识

Tony 2019-07-12 01:4616 阅读

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>

 


                    
回复数量: 0
暂无评论~~
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!