Vue-Router路由学习

news/2024/7/9 23:56:24 标签: Vue, router, 路由

文章目录

//获取当前路由地址
this.$route.path

//编程式路由
this.$router.push("路由地址");

简单使用

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view> </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter1 = {
        template: "<h1>我是路由1 - 用户</h1>"
    }
    var componentRouter2 = {
        template: "<h1>我是路由2 - 注册</h1>"
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            // componet属性需要的是组件对象
            {path:"/user", component: componentRouter1},
            {path:"/register", component: componentRouter2}
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

路由重定向

<script>
     var myRouter = new VueRouter({
            routes: [
                //当用户访问/路径时，强制跳转到/user这个路由地址
                {path:"/", redirect:"/user"},
                {path:"/user", component: componentRouter1},
                {path:"/register", component: componentRouter2}
            ]
        })
</script>

 
 

嵌套路由

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter1 = {
        template: "<h1>我是路由1 - 用户</h1>"
    }

    var componentRouter2 = {
        template: `
            <div>
                <h1>我是路由2 - 注册</h1>
                <hr>
                <router-link to="/register/firstSon">子路由1</router-link>
                <router-link to="/register/secondSon">子路由2</router-link>
                <router-view></router-view>
            </div>
           `
    }

    var sonRouter1 = {
        template:"<h1>我是路由2下的子路由1内容</h1>"
    }
    var sonRouter2 = {
        template:"<h1>我是路由2下的子路由2内容</h1>"
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user"},
            {path:"/user", component: componentRouter1},
            {
                path:"/register",
                component: componentRouter2,
                children:[ {
                    path: "/register/firstSon",
                    component: sonRouter1
                },{
                    path: "/register/secondSon",
                    component: sonRouter2
                } ]
            }
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

动态路由

<javascript>
    // 伪代码
    routers: [
        ｛ path : "/user/1"  component: userComp },
        ｛ path : "/user/2"  component: userComp },
        ｛ path : "/user/3"  component: userComp },        
    ]
</javascropt>

 
 

<javascript>
    var vue = new Vue({
        routers:[{
            {path:"/iser/:id", component: userComp }
        }]
    })
</javascropt>

 
 

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件 - 获取动态路由的数据
    var componentRouter = {
        template: "<h1>我是路由1地址：user/{{$route.params.id}}</h1>"
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //动态路由
            {path:"/", redirect:"/user/1"},
            {path:"/user/:id", component: componentRouter},
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: "<h1>我是路由1地址：user/{{id}}</h1>",
        props: {
            id: {
                default: 0,
                type: String
            }
        }
    }

    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {path:"/user/:id", component: componentRouter, props: true},
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link to="/user/1">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: "<h1>我是路由1地址：user/{{id}} -- 其他值{{name}}、{{age}}</h1>",
        props: ["id", "name", "age"]
    }


    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {
                path:"/user/:id",
                component: componentRouter,
                props: (route) => {

                    return {
                        name: 'lrc',
                        age: 20,
                        id: route.params.id
                    }

                }
            }
        ]
    })

    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

命名路由

<body>
    <div id="app">

        <!--2. 添加路由链接-->
        <router-link :to="{name:'user', params:{id:1}}">User</router-link>
        <router-link to="/user/2">Register</router-link>

        <!--3. 添加路由占位符-->
        <router-view>

        </router-view>

    </div>
</body>

<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: "<h1>我是路由{{id}}地址：user/{{id}} -- 其他值{{name}}、{{age}}</h1>",
        props: ["id", "name", "age"]
    }


    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {
                path:"/user/:id",
                name: "user",
                component: componentRouter,
                props: (route) => {

                    return {
                        name: 'lrc',
                        age: 20,
                        id: route.params.id
                    }

                }
            }
        ]
    })

    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter

    })

</script>

 
 

编程式导航

<script type="text/javascript">

    // 4. 创建路由组件
    var componentRouter = {
        template: `
            <div>
                <h1>我是路由{{id}}地址：user/{{id}} -- 其他值{{name}}、{{age}}</h1>
                <button v-on:click="jump">跳转到/user/2组件</button>
            </div>`,
        props: ["id", "name", "age"],
        methods: {
            jump : function() {
                this.$router.push("/user/2")
            }
        }
    }


    // 5. 配置规则并创建路由对象
    var myRouter = new VueRouter({
        routes: [
            //当用户访问/路径时，强制跳转到/user这个路由地址
            {path:"/", redirect:"/user/1"},
            {
                path:"/user/:id",
                name: "user",
                component: componentRouter,
                props: (route) => {

                    return {
                        id: route.params.id,
                        name: 'lrc',
                        age: 20
                    }

                }
            }
        ]
    })


    var vue = new Vue({

        // 6. 挂载路由
        el: "#app",
        router: myRouter,

    })

</script>

 
 

路由前置守卫

 
 


  //to: 目的
  //form:从哪里来的
  //next() 放行
router.beforeEach((to,from,next)=>{

  var targetPath = to.path;
  if(targetPath=="/my"){
    next("/login");    // 跳转到其他路由路径
  }else{
    next(); //等价于放行
  }
})

http://www.niftyadmin.cn/n/1657862.html

相关文章

linux使用yum安装ftp,linux配置本地yum安装--FTP yum

linux使用yum安装ftp,linux配置本地yum安装--FTP yum

1&#xff1a;首先将ISO文件拷贝到服务器上2&#xff1a;进行ISO文件挂载mount -o loop /backup/soft/rhel-server-6.4-x86_64-dvd.iso /mnt/cdrom/3&#xff1a;配置yum[rootdb_test yum.repos.d]# cat local.repo[base]namelocalbaseurlfile:///mnt/cdrom/gpgcheck0enabled1v…
阅读更多...
一个很好的开源CRM项目

一个很好的开源CRM项目

一个很好的开源CRM项目 http://www.sugarcrm.com,还有简体中文包&#xff0c;是个CRM软件&#xff0c;PHP搞的&#xff0c;打算开始研究之posted on 2005-01-15 19:56 jackyrong的世界 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/jackyrong/archive/2005/…
阅读更多...
今天游戏修改的麻烦

今天游戏修改的麻烦

继续修改程序,到了最后阶段了仍然要修改!没办法,反正是需求方提出的,"老板"让改,我没有办法.只有继续!可恶的是这段代码不是我写的,而是让我去修改,呵呵!我的确是笑了!看到代码的时候更让人想笑-------写的那些全是数字拼凑!Bad smell!Hell!我晕倒!我改吧!从新按照原…
阅读更多...
linux tcp ip调试,Linux 网络性能调试工具Tcpdump命令篇

linux tcp ip调试,Linux 网络性能调试工具Tcpdump命令篇

Linux 网络性能调试工具Tcpdump命令篇Linux 网络性能调试工具Tcpdump命令用于监视TCP/IP连接并直接读取数据链路层的数据包头。您可以指定哪些数据包被监视、哪些控制要显示格式。例如我们要监视所有Ethernet上来往的通信&#xff0c;执行下述命令&#xff1a;Tcpdump-i eth0即…
阅读更多...
ES6模块语法标准 - 模块化、导入、暴露

ES6模块语法标准 - 模块化、导入、暴露

文章目录1. 概述2. ES6模块化规范2.1 暴露某个模块的成员变量、方法(默认、自定义)2.2 运行某个模块的内容 - 不需暴露方法3. 导入 - import只有js文件才可以简写后缀名1. 概述 传统开发问题命名冲突文件依赖模块化进行开发&#xff0c;解决上面两大问题 模块化&#xff1a;单独…
阅读更多...
linux 远程解压tar.gz,转：linux解压tar.gz命令

linux 远程解压tar.gz,转：linux解压tar.gz命令

tar zxvf FileName.tar.gz顺便我们了解下linux下压缩与解压命令大全.tar 解包&#xff1a;tar xvf FileName.tar打包&#xff1a;tar cvfFileName.tar DirName(注&#xff1a;tar是打包&#xff0c;不是压缩&#xff01;).gz解压1&#xff1a;gunzip FileName.gz解压2&#xff…
阅读更多...
linux 下段地址,Linux的分段分页及地址转换机制

linux 下段地址,Linux的分段分页及地址转换机制

保护模式现代操作系统的基础&#xff0c;理解他是我们要翻越的第一座山。保护模式是相对实模式而言的&#xff0c;他们是处理器的两种工作方式。很久以前大家使用的dos就是运行在实模式下&#xff0c;而现在的windows操作系统则是运行在保护模式下。两种运行模式有着较大的不同…
阅读更多...
Magic Library

Magic Library

今天又有人mail我要Magic Library的代码&#xff0c;马上给他发了一份去&#xff0c;不过Magic Library现在已经不免费了&#xff0c;具体什么时候开始的也不知道&#xff0c;sourceforge上的项目也invalid了&#xff0c;记得以前在codeproject上有一篇关于.NET风格的控件的文章…
阅读更多...
最新文章

Copyright @ 2022~2023