zoukankan      html  css  js  c++  java
  • VueRouter

    使用VueRouter的前提:

     1, 必须导入vue-router.js文件
        2, 要有VueRouter()实例
        3, 要把VueRouter实例挂载到Vue实例中
      4, 路由的入口
            <router-link to='/index'>index页面</router-link>
         5, 路由的出口
            <router-view></router-view>

     

    第一个VueRouter实例: 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="d1">
            <!--路由的入口-->
            <!--里面必有这个to="路径" 属性-->
            <router-link to="/index">index页面</router-link>
            <router-link to="/home">home页面</router-link>
            <hr>
            <!--路由的出口-->
            <router-view></router-view>
        </div>
    </body>
    <script src="vue.js"></script>
    <script src="VueRouter.js"></script>
    <script>
        //写路由
        const routes = [
            {
                path:"/index",
                component:{
                  template:`<div>
                                <h1>这是index页面</h1>
                             </div>`,
                },
            },
            //  每一个路由都是一个对象,属性是path:对应的是路径
            // component:里面是template 里的内容将会挂载到页面上。
            {
                path:"/home",
                component:{
                    template:`<div>
                                  <h1>这里是home页面</h1>
                               </div>`,
                }
            }
        ];
        // 生成VueRouter示例
        const router_obj = new VueRouter({
            routes:routes
        });
        var app = new Vue({
            el:"#d1",
            data:{},
            router:router_obj    // 将路由实例挂载到Vue实例中
        })
    </script>
    </html>

    路由的模糊匹配: 

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="d1">
            <router-link to="/user/清秋?age=17">清秋页面</router-link>
            <router-link to="/user/小白?age=17">小白页面</router-link>
            <!--  ?后跟的会存到一个query中,后面只需要从query中调取就可以了-->
            <hr>
            <router-view></router-view>
        </div>
        <script src="vue.js"></script>
        <script src="VueRouter.js"></script>
        <script>
            const routes = [
                {
                    path:"/user/:name",
                    // :后跟的就是模糊查询的,类似于正则
                    component:{
                        template:`<div>
                                        <h1>这里是{{$route.params.name}}的主页页面!</h1>
                                        <p>他{{$route.query.age}}岁</p>
                                   </div>`,
                    }
                },
            ];
            //生成VueRouter实例
            const router_obj = new VueRouter({
                routes:routes
            });
            var app = new Vue({
                el:"#d1",
                data:{},
                router:router_obj  //将路由实例挂载到Vue实例中
            })
        </script>
    </body>
    </html>

    子路由:

      

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="d1">
            <router-link to="/index/qingqiu">清秋的主页</router-link>
            <hr>
            <router-view></router-view>
        </div>
        <script src="vue.js"></script>
        <script src="VueRouter.js"></script>
        <script>
            const routes = [
                {
                  path:"/index/:name",
                  component:{
                      template:`<div>
                                     <h1>这里是{{$route.params.name}}的主页</h1>
                                     <hr>
                                     <router-link to="info" append>他喜欢的music</router-link>
                                     <hr>
                                     <router-view></router-view>
                                 </div>`,
                  //    在父路由里写上子路由的的链接 标签属性里加上append:可以在原有路径的后面追加路径信息
                  },
                    children:[
                        {
                            path:"info",
                            component:{
                                template:`<div>
                                                <h1>忘记时间</h1>
                                                <p>沉默着,走了有,多遥远</p>
                                           </div>`,
                            }
                        }
                    ],
                },
            ];
            const router_obj = new VueRouter({
                routes:routes
            });
            var app = new Vue({
                el:"#d1",
                data:{},
                router:router_obj,
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    Windows python 鼠标键盘监控及控制
    python 执行adb shell 命令
    python Windows提示框
    判断function属于函数或方法
    生成不同时间下的LOG
    pyqt5 QCalendar类中常用的方法
    python字符串大小写转换
    configparser 模块的基本方法
    QGridLayout类中常用的方法
    Day049--jQuery的文档操作和事件介绍
  • 原文地址:https://www.cnblogs.com/stfei/p/9374276.html
Copyright © 2011-2022 走看看