router使用axios

转载

mob6454cc68959c 2024-09-12 07:35:13

文章标签 router使用axios vue Vue 嵌套 css 文章分类 iOS 移动开发

在web使用中，经常需要更新或者跳转页面。vue-router表现的是点击按钮出现内容。也就是一种映射关系。

要了解vue路由，那么先要知道几个参数：route、routes、router

在vue中，route表示创造一条路由，那么routes从字面意思就是创建多条路由，它就是把多条路由集合在一起。router是用来管理这么多路由的管理人。

那么定义路由怎么做呢:

router使用axios_vue

const routes: [{
                path: "/home",
                component: home
                //path表示路径,component表示链接的组件
            },
            {
                path: "/user/:id",
                component: user
            }

创建了多条路由，那么用管理员来管理创建的路由对象把

const router = new VueRouter({
        routes 
        )}

那么接下来来创建组件

var home = Vue.extend({
        template: `
        <h1>网站主页</h1>
//要使用多行的话，使用 `` 反引号,就是tab上面的英文状态下的按键 `
        `
    })
    var user = Vue.extend({
    //Vue.extend用来加载模板
        template: "<h1>用户个人信息页面:{{$route.params.id}}</h1>"
    })

创建完控件之后要在页面上渲染
在要使用路由的地方用来加载链接，to表示要跳转的链接

<router-link to="/home">主页</router-link>
<router-link to="/user">用户页面</router-link>
<!-- -->

最后要在后面加上也就是把组件内容渲染到标签所在位置
最后要把路由注入到根实例中

new Vue({
        el: "#app",
        router: router
    })

动态路由
我们在访问网页时，登陆某个网站，根据网站页面的不同，链接也会不一样，但有个数据基本不会改变，那是你的用户Id,每个用户都不一样，所以Id是一直变化的。这里就可以使用动态路由。
动态路由的Path，:开头是动态部分

{
                path: "/user/:id",
                component: user
            }

那么怎么显示呢

var user = Vue.extend({
        template: "<h1>用户个人信息页面:{{$route.params.id}}</h1>"
        //params就是调用动态路由的参数
        //this.$route.params这里面记录的是路由的参数
    })

router使用axios_css_02

router使用axios_router使用axios_03

根据传入的id不同，显示的Id也不同

*

*表示任意字符，没有匹配到的url 全部转入这里，就比方说 404页面找不到错误

嵌套路由

嵌套名副其实就是嵌套，就比方说这个页面

router使用axios_vue_04

那么最主要的是孩子childern的东西加在哪里?

那肯定加在他父亲那里啊，这问的不是屁话吗

router使用axios_嵌套_05

var other = Vue.extend({
        template: `
       <div style="width: 200px;">
        
        
        <ul class="nav nav-pills nav-stacked">
        <li role="presentation" >
        <router-link to="/other/diantai">电台</router-link></li>
        <li role="presentation"><router-link to="/other/paihang">排行榜</router-link></li>
        <li role="presentation"><router-link to="/other/zhibo">直播</router-link></li>
        </ul>
        <router-view></router-view>
       </div>
  
        `
    });
    var NotFound=Vue.extend({
        template:"<h1>404错误,找不到网页</h1>"
    })
    var diantai = Vue.extend({
        template: "<h2>电台MC</h2>"
    })
    var paihang = Vue.extend({
        template: "<h2>收集排行榜</h2>"
    })
    var zhibo = Vue.extend({
        template: "<h2>直播页</h2>"
    })
   
    const router = new VueRouter({
        routes: [{
                path: "/home",
                component: home
            },
            {
                path: "/user/:id",
                component: user
            },
            {
                path: "/other",
                component: other,
                children: [{
                        path: "diantai",
                        component: diantai
                    },
                    {
                        path: "paihang",
                        component: paihang
                    },
                    {
                        path: "zhibo",
                        component: zhibo
                    },
                    // {
                    //     path: "",
                    //     component: diantai
                    //     //访问默认页面
                    // }
                ]

            },
            {path: "*",component: NotFound},
        ]
    })

像代码中写的那样，在孩子那里的path里面不需要加 /

在链接那里 to里面要加上父类的地址也就是 to="/父/子"

路由命名
顾名思义就是给路由加个name，借此可以从to中调用对象
加了name就可以这样搞了

<router-link :to="{name:'user',params:{id:123}}">用户页面</router-link>

记得要在to前面加上: ，因为是对象，所以要用:绑定

那最后我把所有代码放在这里:

router使用axios_Vue_06

<body>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <div id="app">
        <ul class="nav nav-pills ">
            <li role="presentation">
                <router-link to="/home">主页</router-link>
            </li>
            <li role="presentation">
                <router-link to="/user">用户页面</router-link>
            </li>
            <li role="presentation">
                <router-link to="/other">其他</router-link>
            </li>
        </ul>
       <div class="container" >
           <router-view></router-view>
           <!---->
       </div>
    </div>

</body>
<script>
    var home = Vue.extend({
        template: `
        <h1>网站主页</h1>

        `
    })
    var user = Vue.extend({
        template: "<h1>用户个人信息页面:{{$route.params.id}}</h1>"
        
    })
    var other = Vue.extend({
        template: `
       <div style="width: 200px;">
        
        
        <ul class="nav nav-pills nav-stacked">
        <li role="presentation" >
        <router-link to="/other/diantai">电台</router-link></li>
        <li role="presentation"><router-link to="/other/paihang">排行榜</router-link></li>
        <li role="presentation"><router-link to="/other/zhibo">直播</router-link></li>
        </ul>
        <router-view></router-view>
       </div>
  
        `
    });
    var NotFound=Vue.extend({
        template:"<h1>404错误,找不到网页</h1>"
    })
    var diantai = Vue.extend({
        template: "<h2>电台MC</h2>"
    })
    var paihang = Vue.extend({
        template: "<h2>收集排行榜</h2>"
    })
    var zhibo = Vue.extend({
        template: "<h2>直播页</h2>"
    })
   
    const router = new VueRouter({
        routes: [{
                path: "/home",
                component: home
            },
            {
                path: "/user/:id",
                component: user
            },
            {
                path: "/other",
                component: other,
                children: [{
                        path: "diantai",
                        component: diantai
                    },
                    {
                        path: "paihang",
                        component: paihang
                    },
                    {
                        path: "zhibo",
                        component: zhibo
                    },
                    // {
                    //     path: "",
                    //     component: diantai
                    //     //访问默认页面
                    // }
                ]

            },
            {path: "*",component: NotFound},
        ]
    })
    new Vue({
        el: "#app",
        router: router
    })
</script>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。