首页 > 其他分享 >复杂路由

复杂路由

时间:2022-11-18 14:33:57浏览次数:48  
标签:复杂 component template path var router 路由

一、嵌套路由:可在单页应用框架下开发多页应用。

思想:嵌套路由其实是 router-view 的细化,router-view 第一层中包含一个 router-view,路由children路由。每一个坑挖好都要对应一个单独的组件。

配置路由对象:在嵌套路由中,下级路由的信息配置在上级路由信息对象的 children 属性里面,children 属性里面可以配置多套路由信息对象。

// 2.创建路由对象
var router = new VueRouter({
// 3.配置路由对象
  routes:[
  // 4.创建路由匹配的规则
    {
      // 动态路由参数以冒号开头
      path:'/home',
      name:'home',
      component:Home,
      // 嵌套路由
      children:[
        {
          path:'song',
          name:'song',
          component:Song
        },
        {
          path:'movie',
          name:'movie',
          component:Movie
        }
      ]
    }
  ]    
});

 代码如下:

    <div id="app"></div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 地址栏 路由范式
        // (1)xxx.html#/user/1 params 动态路由参数
        // (2)ooo.html#/user?userId = 1 query
        // 1.声明路由组件
        var Song = {
            template:'<div>我是歌曲组件</div>',
            created(){
                console.log(this.$route);
                console.log(this.$router);
            }
        }
        var Movie = {
            template:'<div>我是电影组件</div>',
            created(){
                console.log(this.$route);
                console.log(this.$router);
            }
        }
        // /home/song
        // /home/movie
        var Home = {
            template:` 
                <div>首页内容
                    <br/>
                    <router-link to='/home/song'>歌曲</router-link>
                    <router-link to='/home/movie'>电影</router-link>

                    <!-- 路由出口 -->
                    <router-view></router-view>
                </div>
            `
        }
        // 2.创建路由对象
        var router = new VueRouter({
            // 3.配置路由对象
            routes:[
                // 4.创建路由匹配的规则
                {
                    // 动态路由参数以冒号开头
                    path:'/home',
                    name:'home',
                    component:Home,
                    // 嵌套路由
                    children:[
                        {
                            path:'song',
                            name:'song',
                            component:Song
                        },
                        {
                            path:'movie',
                            name:'movie',
                            component:Movie
                        }
                    ]
                }
            ] 
        });
        // 5.抛出两个全局组件 router-link router-view
        // 抛出两个对象 $router $route(路由信息对象) 挂载到了Vue实例化对象
        var App = {
            template:`
                <div>
                    <!-- router-link默认会被渲染为a标签,router-view默认会被渲染为herf标签 -->
                    <router-link :to="{name:'home'}">首页</router-link> 
                    <!-- 6.路由组件的出口 -->
                    <router-view></router-view>
                </div>
            `
        };
        // 6.将配置好的路由关联到vue实例对象中
        new Vue({
            el:'#app',
            router:router,
            template:` 
                <App/>
            `,
            components:{
                App,
                router,
            }
        });
    </script>

 

 二、动态路由。

    <div id="app"></div>
    <script type="text/javascript" src="../vue/vue.js"></script>
    <script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script type="text/javascript">
        // 地址栏 路由范式
        // (1)xxx.html#/user/1 params 动态路由参数
        // (2)ooo.html#/user?userId = 1 query
        // 1.声明路由组件
        var ComDesc = {
            data(){
                return{
                    msg:''
                }
            },
            template:`
                <div>
                    {{ msg }}
                </div>`,
            created(){
                this.msg = '安卓';
                console.log(1);
            },
            watch:{
                '$route'(to, from){
                    // 对路由变化作出响应
                    console.log(to);
                    console.log(from);

                    this.msg = to.params.id;
                }
            }
        }
        // /timeline/andorid
        // /timeline/frontend
        var Timeline = {
            template:` 
                <div id='timeline'>
                    <router-link :to="{name:'comDesc',params:{id:'adroid'}}">安卓</router-link>
                    <router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>

                    <!-- 路由出口 -->
                    <router-view></router-view>
                </div>
            `
        }
        var Pins = {
            template:` 
                <div>我是沸点</div>
            `
        }
        // 2.创建路由对象
        var router = new VueRouter({
            // 3.配置路由对象
            routes:[
                // 4.创建路由匹配的规则
                {
                    // 动态路由参数以冒号开头
                    path:'/timeline',
                    name:'timeline',
                    component:Timeline,
                    children:[
                        {
                            path:'/timeline/:id',
                            name:'comDesc',
                            component:ComDesc
                        }
                    ]
                },
                {
                    path:'/pins',
                    component:Pins
                }
            ]
        });
        // 5.抛出两个全局组件 router-link router-view
        // 抛出两个对象 $router $route(路由信息对象) 挂载到了Vue实例化对象
        var App = {
            template:`
                <div>
                    <!-- router-link默认会被渲染为a标签,router-view默认会被渲染为herf标签 -->
                    <router-link :to="{name:'timeline'}">首页</router-link> 
                    <router-link to='/pins'>沸点</router-link> 

                    <!-- 6.路由组件的出口 -->
                    <router-view></router-view>
                </div>
            `
        };
        // 6.将配置好的路由关联到vue实例对象中
        new Vue({
            el:'#app',
            router:router,
            template:` 
                <App/>
            `,
            components:{
                App,
                router,
            }
        });
    </script>

 

标签:复杂,component,template,path,var,router,路由
From: https://www.cnblogs.com/sfwu/p/16902996.html

相关文章

  • router-link 路由参数
    1、路由信息对象:通过this.$route可获取组件的配置路由的对象,只读对象。  2、路由操作对象:通过this.$router可获取路由对象,也就是VueRouter,只写对象。 3、路由......
  • vue 路由传参
    1.路由传参两种方式params方式query方式 params方式需要占位   query方式不需要 ......
  • 使用路由元信息 全局控制显示隐藏路由组件
    1.在路由中配置自定义属性  2.在使用页面组件中 用$route.meta.show 是否为true判断组件显示或隐藏下面为例      3.示例 ......
  • 前端路由的原理
    1、window.onhashchange(监听URLhash):当一个窗口的hash(URL中#后面的部分)的改变时就会触发hashchange事件。2、在hashchange 事件中匹配URL,存在则加载对应的DOM元......
  • 47:字典_复杂表格数据存储_列表和字典综合嵌套
    ###表格数据使用字典和列表存储,并实现访问源代码(mypy_09.py):r1={"name":"高小一","age":18,"salary":30000,"city":"北京"}r2={"name":"高小二","age":19,"salary":......
  • [笔记]前端路由的两种模式
    参考资料:https://juejin.cn/post/7127143415879303204#heading-11https://blog.csdn.net/qq_28641023/article/details/120328826理解单页面应用单页面应用是指我......
  • 计算机网络14 Internet网络层主要功能 IP协议 路由协议 ICMP协议
    1 主机、路由器网络层主要功能 2IP数据报2.1图示 2.2字段详细介绍1)版本号占4位:IP协议的版本号。4表示IPv4,6表示IPv6。 2)首部长度占4位:表示IP分......
  • 解决Vue中使用history路由模式出现404的问题
    背景vue中默认的路由模式是hash,会出现烦人的符号#,如http://127.0.0.1/#/。改为history模式可以解决这个问题,但是有一个坑是:强刷新、回退等操作会出现404。Vue改用History......
  • 开发访问k8s集群的几种方法(路由和kt)
    现状k8s集群内是有一套完整网络环境,我们不能直接通过IP访问到k8s集群内的pod或者service,只能通过nodeport或者ingress才能访问到服务.痛点开发人员进行微服务开发的......
  • 路由器刷 X-WRT 使用IPV6
    小米路由器3 分类: Windows平台2021-07-2911:09:45 最近研究IPV6中,初步在内网使用IPV6是没有问题,但是我们最终是先要外网的不是....家里有部小米路由器3,目......