精华内容
下载资源
问答
  • Vue 路由嵌套、数据请求、组件

    千次阅读 2017-03-20 12:55:19
    /*import Vue from './vue_js/vue.js'; import Router from './vue_router/vue_router.js'; import resoure from './vue_js/resoure.js';*/ const testTax = Vue.component( "test-tax" ,{ template: "#tax" ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" href="css/style.css">
    <body>
    
    <div id = "app">
        <div class="app" >
            <a class="width"  ><router-link to="/tax">急速免税</router-link> </a>
            <a  class="width" ><router-link to="/classify"> 分类</router-link> </a>
            <a  class="width" > <router-link to ="/cart">购物车</router-link></a>
            <a  class="width" ><router-link to ="/my">我的</router-link> </a>
    
        </div>
        <router-view></router-view>
    </div>
    </body>
    
    <template id = "tax">
        <div >
            <tax-child1></tax-child1>
            <div v-for="name in names">
                {{name}}
            </div>
            <span v-for="item in movies" >
                <img  style="width: 150px;height:150px;" v-bind:src="item.avatars.large" alt="">
                <span>{{item.name}}</span>
            </span>
           <div>
               <ul style="float: left;margin-right: 50px;margin-left: 50px">
                   <li>
                       <router-link :to="{path:'/tax/taxchild1',query:{id:12312313}}">route1</router-link>
                   </li>
                   <li>
                       <router-link :to="{path:'/tax/taxchild2',query:{id:345353}}">route2</router-link>
                   </li>
               </ul>
    
               <router-view></router-view>
    
           </div>
        </div>
    </template>
    
    <script type="text/x-template" id = "classify">
        <div>
            <div>我是分类</div>
            <button @click ="goCar">跳到购物车</button>
        </div>
    
    </script>
    <script type="text/x-template" id = "cart">
        <div>我是购物车</div>
    </script>
    <script type="text/x-template" id = "my">
       <div>
           <span>我的资料</span>
       </div>
     </script>
    
    <template id ="tax-child1">
        <div>
            <ul>
                <li>tax-child1 01</li>
                <li>tax-child1 02</li>
                <li>tax-child1 03</li>
            </ul>
        </div>
    </template>
    
    <template id ="tax-child2">
    
        <ul>
            <li>tax-child2 01</li>
            <li>tax-child2 02</li>
            <li>tax-child2 03</li>
        </ul>
    
    </template>
    
    
    <script type="text/javascript" src = "vue_js/vue.js"></script>
    <script type="text/javascript" src = "vue_router/vue_router.js"></script>
    <script type="text/javascript" src = "vue_js/resoure.js"></script>
    <script>
    
        /*import Vue from './vue_js/vue.js';
        import Router from './vue_router/vue_router.js';
        import resoure from './vue_js/resoure.js';*/
        const testTax = Vue.component("test-tax",{
            template:"#tax",
            replace:true,
            props:{
    
            },
            data:function(){
                return {
                    movies:[],
                    names:["赌神","四面楚歌"]
                }
            },
            mounted:function () {
                console.log(this);
                let that = this;
                var url = "https://api.douban.com/v2/movie/subject/1764796";
                this.$http.jsonp(url, {}, {
                }).then(function(response) {
                    that.movies = response.body.casts;
                    console.log(that.movies);
                }, function(response) {
                    // 这里是处理错误的回调
                    console.log(response);
                });
            }
        });
        const testClassify =  Vue.component("test-classify",{
            template:"#classify",
            data:function(){
                return {
    
                }
    
            },
            methods:{
                goCar:function (){
                    /*  route.go("/cart");*/
                    this.$router.push({ path: 'cart', query: { id: 12312312313 } });
                    /*this.$router.go({path:"cart"});拿不到值*/
                }
            }
        });
        const testCart  = Vue.component("test-cart",{
            template:"#cart",
            props:[],
            data:function(){
                return {
                }
            },
            mounted:function(){
                console.log(this.$route.query.id);
            }
    
        });
        const testMy =  Vue.component("test-my",{
            template:"#my",
            props:[],
            data:function(){
                return {
    
                }
    
            },
            mounted:function(){
    
            }
        });
    
        const taxChild1 =  Vue.component("tax-child1",{
            template:"#tax-child1",
            data:function(){
                return {
    
                }
    
            },
            mounted:function(){
                console.log(this.$route.query.id);
            }
        });
    
        const taxChild2 =  Vue.component("tax-child2",{
            template:"#tax-child2",
            data:function(){
                return {
    
                }
    
            }
        });
    
    
        const router = new VueRouter({
            routes: [
                {
                    path: '/tax',
                    component: testTax,
                    children:[
                        {path:'/tax/taxchild1',component:taxChild1},
                        {path:'/tax/taxchild2',component:taxChild2}
                    ]
    
                },
                {
                    path: '/classify',
                    component: testClassify
                },
                {
                    path: '/cart',
                    component: testCart
                },
                {
                    path: '/my',
                    component: testMy
                },
                { path: "", redirect: '/tax' }
            ]
    
        });
    
    
        const app = new Vue({router}).$mount('#app')
    
    
    </script>
    
    </html>
    展开全文
  • vue路由嵌套

    2020-12-08 16:19:29
    文章目录vue路由二、使用步骤1.引入库2.读入数据总结# vue系列前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结一、pandas是什么?二、使用步骤...

    vue路由

    对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;

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

    在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);

    前端的路由:就是根据不同的Hash地址,在页面上展示不同的前端组件;

    路由的嵌套

    在一个页面上显示一个子页面,不能覆盖当前的页面
    在路由规则中添加children 属性

    • 显示
        <!-- 路由链接 -->
        <router-link to="/account">显示账号组件</router-link>
        <router-link to="/newlist">新闻列表组件</router-link>
    
        <!-- 路由的容器 -->
        <router-view></router-view>
      </div>
    
    • 定义路由组件
    const account= {
          template: `<div class="account">
            <h1>登录组件</h1>      
            <router-link to="/account/login">登录</router-link>
            <router-link to="/account/reg">注册</router-link>
            <router-view></router-view>
          </div>`
         
        }
        const newlist={
          template:`
          <div class="newlist">
            <h1>新闻组件</h1>
          </div>
          `
        }
        const login={
          template:`
          <div>
            <h3>登录</h3>
          </div>
          `
        }
        const reg={
          template:`
          <div>
            <h3>注册</h3>
          </div>
          `
        }
    
    • 创建路由对象(匹配路由规则)
      路由嵌套:使用children属性
      注意:子路由的path不要加斜线 /
    const router = new VueRouter({
          routes: [//路由规则     
          {path:'/account',component:account,children:[
            //account 规则的子路由规则 
            {path:'login',component:login},
            {path:'reg',component:reg}
    
          ]},
          {path:'/newlist',component:newlist},
          
          ]      
        })
    
    • 挂载路由对象
    var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router
        });
    
    展开全文
  • Vue——嵌套路由

    2021-02-02 19:30:39
    有关路由的详细信息可以去vue的官网去查看,我这里只是自己实例的一个理解和总结。 单页面程序离不开路由的分配,自始至终只有一个页面存活,因此有关路由跳转的逻辑要合理配置 vue-Router 选择官方使用的vue-...

    路由

    有关路由的详细信息可以去vue的官网去查看,我这里只是自己实例的一个理解和总结。

    单页面程序离不开路由的分配,自始至终只有一个页面存活,因此有关路由跳转的逻辑要合理配置


    vue-Router

    选择官方使用的vue-router库,因此要先准备环境

    • 安装
    $ npm install vue-router
    

    安装之后就要配置路由,但是为了方便维护路由节点,可以创建单独的文件存放路由配置,因此创建router文件夹,添加index.js

    • index.js
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    export default new VueRouter({
    	routes: []
    })
    
    

    然后在根入口文件中导入router,并配置到vue实例中。

    • main.js
    import router from './router'
    
     new Vue({
        el: '#app',
        components: {App},
        template: '<App/>',
        router
    })
    
    

    这样就能在各个模块中使用路由了。


    实例

    在src目录下创建views目录,分别创建about、home、news、message、detail的vue页面。

    • 路由映射文件——index.js
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    import About from '../views/About.vue'
    import Home from '../views/Home.vue'
    import News from '../views/News.vue'
    import Message from '../views/Message'
    import Detail from '../views/detail.vue'
    
    Vue.use(VueRouter)
    
    export default new VueRouter({
        routes: [
            {path: '/', redirect: '/about'},
            {path: '/about', component: About},
            {
                path: '/home',
                component: Home,
                children: [
                    {path: 'news', component: News},
                    {
                        path: 'message',
                        component: Message,
                        children: [
                        {path: 'detail/:id', component: Detail}
                        ]
                    },
                    {path: '', redirect: 'news'}
    
                ]
            }
        ]
    })
    
    

    路由映射配置好之后就要开始使用了

    使用 router-link 组件来导航。 通过传入 to 属性指定链接。 默认会被渲染成一个 <a> 标签

    • App.vue
    <template>
        <div>
            <div class="row">
                <div class="col-xs-offset-2 col-xs-8">
                    <div class="page-header">
                        <h2>Router basic-2</h2>
                    </div>
                </div>
            </div>
    
            <div class="row">
                <div class="col-xs-2 col-xs-offset-2">
                    <div class="list-group">
                    <router-link to="/about" class="list-group-item">About</router-link>
                    <router-link to="/home" class="list-group-item">Home</router-link>
                        <!-- <a href="#/about" class="list-grou-item router-link-exact-active activeClass">About</a>
                        <a href="#/home" class="list-group-item">Home</a> -->
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="panel">
                        <div class="panel-body">
                            <keep-alive>
                            <router-view></router-view>
                            </keep-alive>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    

    样式是使用的bootstrap的cdn,将其以link的形式引用到index.html中。
    APP中是分成了两个块,头部用来显示信息,下边则是组件的部分,其中左侧添加了路由导航,右侧将路由匹配到的组件渲染出来。


    页面

    接着就要实现页面的信息了,当点击左侧的home导航,右侧就会将home的组件渲染到右侧。

    • home.vue
    <template>
    <div>
        <ul class="nav nav-tabs">
            <li>
                <router-link to="/home/news" >news</router-link>
            </li>
            <li>
                <router-link to="/home/message" >Message</router-link>
            </li>
        </ul>
        <div>
        <router-view></router-view>
        </div>
    </div>
    </template>
    
    

    此处可以看到在home页面中也有路由的嵌套,当点击home中的message导航时,就会将message组件的内容渲染出来


    • message.vue
    <template>
    <div>
        <ul>
            <li v-for="message in messages" :key="message.id">
                <router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                messages: []
            }
        },
        mounted () {
            setTimeout(() => {
                const temp = [
                    { id: 1, title: 'message' },
                    { id: 2, title: 'message' },
                    { id: 3, title: 'message' },
                    { id: 4, title: 'message' }
                ]
                this.messages = temp
            }, 500)
        }
    }
    </script>
    
    

    在这里插入图片描述
    当点击message时就会将vue实例中的messages赋值,然后绑定到页面中。
    其中当点击循环出来的title时还会再次触发路由,此时将该条数据的ID传给detail,然后把detail组件放在下边渲染出来。


    当detail组件初始化的时候就应该去获取路由参数,然后根据参数中的值去请求后台拿到相应的数据,然后在实现绑定渲染的效果。但这个实例中没有与后台交互,因此在初始化拿到数据后就自动创建一个模拟数据(忘了用插件了)。

    • detail.vue
    <template>
    <div>
        <ul>
            <li>id: {{$route.params.id}}</li>
            <li>title: {{detail.title}}</li>
            <li>content: {{detail.content}}</li>
        </ul>
    </div>
    </template>
    
    <script>
    export default {
        data () {
            return {
                detail: {}
            }
        },
        methods: {
            getDetail (id) {
                 this.detail = {id: id, title: 'message' + id, content: 'message content'}
            }
        },
        mounted () {
            const id = this.$route.params.id
            this.getDetail(id)
        },
        watch: {
            $route: function () {
            this.getDetail(this.$route.params.id)
            }
        }
    }
    </script>
    
    

    这里添加了一个监视器,用来监听路由上的ID值,每当有变化就改变data中的数据,重新获取当前值。


    router-view

    另外一种方式就是通过标签传值,当message组件被渲染时代表其通过router-view标签,此时可以在标签上添加参数来传值,而被渲染的组件内部只需要通过props来获取即可。

    	// father
        <router-view msg="abc"></router-view>
    	// son
    	  props: {
            msg: String
        },
    

    总结

    vue-router作为vue的官方库应该是很强的,只不过目前接触的比较少,只能稍微明白怎么用。目前明白的就是有一个路由导航,当触发路由后将导航匹配到的组件通过路由标签渲染出来。有关路由取值目前还没总结,这也是一个比较重要的知识。这次的传值是通过路由 :id 直接配置的,相当于一个占位符,要想进入该页面,在触发时就要把id传进去。

    展开全文
  • vue路由嵌套及案例

    2020-05-20 19:03:46
    路由嵌套: 路由嵌套时,内层路由在外层路由的模板对象(即template中)中添加...子路由前不需要加’/’,否则永远以根路径开始请求,不方法用户理解url地址 代码 <!DOCTYPE html> <html lang="zh">

    路由嵌套:

    • 路由嵌套时,内层路由在外层路由的模板对象(即template中)中添加(router-link,router-view)
      外层路由的router-link,router-view在html结构中
    • 内层路由的{path:‘login’,component:login}放在路由实例化的routes的children属性中
    • 子路由前不需要加’/’,否则永远以根路径开始请求,不方便用户理解url地址

    代码

    <!DOCTYPE html>
    <html lang="zh">
        <head>
            <meta charset="UTF-8">
            <meta name="viewreport" content="width=device-width initial-scan=1.0">
            <title>vue-router-嵌套</title>
            <script src="vue.js"></script>
            <script src="vue-router.js"></script>
        </head>
        <body>
            <div id="app">
                <router-link to='/account'>account</router-link>
                <router-view></router-view>
            </div>
            <template id="tmp1">
                <div>
                    <h1>欢迎来到这里</h1>
                    <router-link to='/account/login'>登录</router-link> 
                    <router-link to='/account/register'>注册</router-link>
                    <router-view></router-view>
                </div>
            </template>
            <script>
                var account={
                    template:'#tmp1'
                }
    
                var login = {
                    template:'<h2>登录</h2>'
                }
    
                var register = {
                    template:'<h2>注册</h2>'
                }
    
                var vueroute = new VueRouter({
                    routes:[
                        {
                        path:'/account',
                        component:account,
                        //子路由前不需要加'/',否则永远以根路径开始请求,不方法用户理解url地址
                        children:[
                        {path:'login',component:login},
                        {path:'register',component:register}
                        ]
                        },
                    ],
                    
                })
                var vm = new Vue({
                    el:"#app",
                    data:{},
                    methods:{},
                    router:vueroute
                })
            </script>
        </body>
    </html>
    
    展开全文
  • Vue嵌套router传参params与query

    千次阅读 2017-11-06 17:51:42
    vue嵌套路由中父组件向子组件传递路由可以通过传参的方式,传参有params与query两种方式。一、params传参会在地址栏隐藏参数,与ajax的post请求极为相似,用法上不能用path来定义路径,要通过name来定义,用法如下:...
  • VUE简单嵌套小页面中

    千次阅读 2019-03-27 11:23:31
    //http接口请求 <script src="js/vue-resource.js"> <script src="js/main.js"></script> <router-view></router-view> ;"> <div class="title"></div> <!--...
  • vue嵌套对象渲染报错的解决方法

    千次阅读 2019-01-04 11:42:41
    在页面渲染时,我的数据是嵌套的对象,如下图: 页面运行时可以正常显示,可是可以看到控制台还是会报错,如下图: 最后发现只需在页面显示时加一个判断就不会再报错了,如下图: ...
  • vue 多级嵌套数组渲染性能优化

    千次阅读 2020-05-12 15:46:06
    按照道理,vue使用的虚拟dom,渲染数组应该很快的。但是页面慢,就是嵌套渲染效率低,没有别的办法,只能去解决四层嵌套的渲染问题了。 1、我首先想到的是拆接口,类似于点击区域的时候,接口获取区域下的业务员,...
  • <td> {{bean.user.name}} </td> 如果这样写会访问不到,出错,改成下面这样 <td v-if="bean.user"> {{bean.user.name}} </td> 参考:......
  • vue项目嵌套iframe,发送、接收数据

    千次阅读 2019-05-18 17:15:27
    <title>iframe嵌套网页测试 window.addEventListener('message',function(e){ console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') console.log(e.origin,e.data) }) // window.postMessage({...
  • 使用初始参数parameter请求第一页数据,从返回数据中对pagination重置翻页组件内部参数,主要有当前页,页码总量,页码大小 getDictList(this.parameter) .then(res => { if (res.code === '200') { console...
  • vue嵌套路由params传参

    千次阅读 2018-08-22 20:27:56
    注意:如果路由上面不写参数,也是可以传过去的,但不会在 url 上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的 http 请求或者其他操作就会失败。...
  • Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: <iframe src=...
  • vue中使用H5Stream 参考上一篇文档:H5Stream使用 1、在vue中新建包,将下载的h5s-r10.6.0229.20-win64-release文件根目录下的www文件夹中的js放在里面,其中css也可以放在里面,也可以不用放 2、在vue的index....
  • Vue 嵌套路由

    2019-10-08 22:48:03
    文章目录嵌套路由具体实现 嵌套路由 说白了就是选项卡中又嵌套一个选项卡。 可以看看官方的例子 ...chilrenRoute1.vue <template> <div> chilrenRoute1 </div> </template> <scri...
  • 关于VUE嵌套iframe的一系列问题

    万次阅读 热门讨论 2018-07-17 12:04:13
    最近有很多小伙伴问超哥关于vue嵌套iframe一些问题。 犹豫本尊最近转型了react,关于vue的问题以后会在csdn发表博客。 废话不多说,直接进入正题; 本尊并不建议vue嵌套iframe,当然会有那些个比较恶心的需求,...
  • async 与await 解决请求回调地狱(多层请求嵌套) 1.async(异步) 与 await(同步) 方法 解决请求回调地狱 是通过promise来实现的,所以使用这两个方法进行测试也是要模拟返回一个promise对象===手动返回。 *没有返回...
  • Vue: vue-router路由 测试 1.先删除没有用的东西 2.components目录下存放我们自己编写的组件 3.定义一个Content.vue的组件 <template> <h1>内容页</h1> </template> <script> export...
  • 目前接到一个需求,是我之前从来没有实践过的,正好趁此机会做一个深度剖析,并记录下这次的成长,并分享给大家。...二 、 配置内容支持**无限嵌套** 三、配置数据格式示例(配置包括项和模块) ...
  • 主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下
  • Vue嵌套路由的使用方法及注意事项 借助vue-router,使用嵌套路由 router-view 不仅可以作为最顶层的出口,渲染最高级路由匹配到的组件;还可以作为被渲染组件嵌套路由的出口。 1、router-view 作为最顶层的出口 <...
  • vue中component组件嵌套,导致页面重复渲染,重复请求的bug 因详情页面,有多个tab选项卡考虑页面多处重复使用,而且有多个页面组成,最终决定使用 组件方式来引用页面。 因 项目采用的UI组件是 element-ui,刚好...
  • Vue中路由嵌套(子路由)

    千次阅读 2020-12-02 18:59:10
    根据我们前面学习的VueRouter的知识,可以直接写出代码来实现: 一般写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 文章目录路由嵌套 路由嵌套 嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件组合而成。
  • 嵌套路由:一个路由配置中嵌套其他的路由配置。 嵌套路由挺常用的,比如导航栏有首页、文章、想法、留言4个模块,我们以嵌套路由的形式集成这些模块,在导航栏中点击对应的条目,就会路由到对应的页面(下方显示...
  • vue 使用async await处理异步嵌套请求

    千次阅读 2020-05-13 11:05:04
    created() { this.getKpiRoleButton(); }, methods: { async getKpiRoleButton() { const resultObj = await this.signKpiRoleIdSearch(); //resultObj.data.data是id需要传给下面的接口 try { ...
  • vue路由和路由嵌套

    2019-11-21 23:41:43
    ###1.vue路由 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系,就是路由。 路由分为前端...
  • 1、现在是父组件请求,套用子组件请求, 当父组件请求完成之后,返回的都是Promise对象,使用循环 ,将父组件返回的Promise对象存到一个新的数组中。 2、再使用 es6 中的Promise.all()将数组中的Promise对象解析...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,413
精华内容 4,965
关键字:

vue请求嵌套

vue 订阅