当前位置： 首页 > news >正文

Vue Router

news 来源：原创 2024/5/4 8:27:17

Vue Router

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为

Vue-router

路由的切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue router</title>
</head>

<body>
    <div id="app">
        <!-- router-link  router-view  ===》 vue-router定义好的组件-->
        <!-- <router-li>控制跳转的路径和显示的文本</router-li> -->
        <!-- router-view 控制的路由对应的组件 -->
        <!-- active-class 控制选中对应路径时候的类名  current自己随便加自己的类名-->
        <router-link to="/home" active-class="current">首页</router-link>
        <router-link to="/list" active-class="current">列表页</router-link>
        <a href="#/home">首页2</a>
        <a href="#/list">列表页2</a>
        <h1>{{name}}</h1>
        <router-view></router-view>
        <router-view></router-view>
    </div>
</body>

</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    /**
     * 1.生命组件
     * 2.编写路由映射表
     * 3.把编辑好的映射表注入到router实例中
     * 4.把router实例注入到根实例中
     * 
     * 使用时编写router-link router-view即可
     *     */
    let home = {
        template: "<div>home</div>"
    };
    let list = {
        template: "<div>list</div>"
    };
   
    let routes = [
         // routes路由映射表
        //  数组报对象的方式
        {
            path: "/home",//路径
            component: home//路径对应的组件
        },
        {
            path: "/list",
            component: list,
        }
    ]
    let router= new VueRouter({
        // 在router实例注入路由映射表
        routes,//routes :routes  属性名routes是写死的
    })


    let vm = new Vue({
        el: '#app',
        data: {
            name: "洋"
        },
        router,//把router实例注入到根实例中 router写死的  router:router
    })
</script>
复制代码

vue-router

  • Vue Router一共提供了两种传参方式
  • 1、query传参 问好传参 路由映射表不用改动 :to={path:"",query:{}} 或者:to{name:"",query:{}}, this.$route.query.XXX
  • 2、params传参 路径传参 在映射表中天添加 /:变量 的形式 :to={name:"",params:{变量:""}} this.$route.params.XX
    <div id="app">
        <h1>{{name}}</h1>
        <!-- 路径传参params:{qqq:333}}  看不出来是一个参数 
             使用路径传参时 路径传参只能用name不能用path-->
        <router-link :to="{name:'home123',query:{id:132},params:{qqq:333}}">home</router-link>
        <router-link :to="{name:'home123',query:{id:132},params:{qqq:333}}">home</router-link>
        <router-link :to="{path:'/list'}">list</router-link>
        <router-view></router-view>
    </div>
    let home = {
        template:"<h1>首页</h1>",
        created(){
            let id = this.$route.query.id;
        },
        mounted() {
            console.log(this)
        },
    }
    let list = {
        template:"<h1>列表页</h1>"
    }
    let routes = [
        // {
        //     path:'/home/:qqq',
        //     name:'home123',
        //     component:home
        // },
        {
            path:'/home/:qqq/hom2/:www',
            name:'home123',
            component:home
        },
        {
            path:'/list',
            component: list
        }
    ];
    let router = new VueRouter({
        routes,
        linkActiveClass:'cur'
    })
    let vm = new Vue({
        el:'#app',
        router,
        data:{
            name:"洋"
        }
    })
</script>
复制代码

重定向 redirect 路由注册表routes

mode:"history"改变传参的位置隐藏#后面写到路径里面`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <router-link :to="{path:'/home/333',query:{a:12,b:13}}">首页</router-link>
        <router-link :to="{path:'/list',query:{a:12,b:13}}">列表页</router-link>
        <router-view></router-view>
    </div>
</body>

</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    let home = {
        template: "<h1>首页</h1>",
        created() {
            let id = this.$route.query.id;
        },
        mounted() {
            console.log(this)
        },
    }
    let list = {
        template: "<h1>列表页<router-view></router-view></h1>"
    }
    let hy = {
        template:"<h2>惠盈</h2>"
    }
    let zt = {
        template:"<h2>直投</h2>"
    }


    let routes = [
        {
            path: "*",
            //刚进页面是莫问路径是"/" 我们在匹配到这个路径之后让他重新指向一个新的路径
            redirect: "/home/333",
        },
        {
            // 路径传参
            path: "/home/:id",
            name: "home",
            component: home,
        },
        {
            path: "/list",
            component: list,
            children: [
                //子路由映射
                {
                    path: "/list/hy",
                    component: hy,
                }, {
                    path: "/list/zt",
                    component: zt,
                },
                {
                    path:"/list/*",
                    redirect:'list/hy'
                },
                ]
        },
        {
            path: "/*",
            //党走到一个不存在的路径时 我们让路径做到默认值，只能写到最小面否则就会是死循环
            redirect: "/home/333",
        },
    ]
    const router = new VueRouter({
        routes,
        linkActiveClass: "currue",
        // mode:"history",
        // 默认："hash"
        // 开发阶段用hash；上线时 可以选择history模式 ;history模式需要后台配合
    })
    let vm = new Vue({
        el: '#app',
        data: {
            name: "洋"
        },
        router,
    })
</script>
复制代码

嵌套使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <router-view></router-view>
    </div>
</body>

</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // // 第一层  投资路由  invest
    // 第二层  分为网贷和理财  wd  lc
    // 第三层  wd->(zt,dqb) lc->(hy,ht)

    let invest = {
        template: `<div>投资层
            <router-link to="/invest/lc">理财</router-link>
            <router-link to="/invest/wd">网贷</router-link>
            <router-view></router-view>
        </div>`,
    }
    let wd = {
        template: `
        <div>
            网贷
            <router-link to="/invest/wd/zt">直投</router-link>
            <router-link to="/invest/wd/dqb">定期宝</router-link>
            <router-view></router-view>
        </div>
        `
    }
    let lc = {
        template: `
        <div>
            网贷
            <router-link to="/invest/lc/hy">惠营 </router-link>
            <router-link to="/invest/lc/ht">惠头</router-link>
            <router-view></router-view>
        </div>
        `
    }
    let zt = {
        template: '<h1>直投标</h1>'
    }
    let dqb = {
        template: '<h1>定期宝标</h1>'
    }
    let hy = {
        template: '<h1>惠盈标</h1>'
    }
    let ht = {
        template: '<h1>惠投标</h1>'
    }

    const routes = [
        {
            path: "/",
            redirect: "/invest"

        },
        {
            path: "/invest",
            component: invest,
            children: [{
                path: "/invest/wd",
                component: wd,
                children: [
                    {
                        path: "/invest/wd/zt",
                        component: zt,
                    },
                    {
                        path: "/invest/wd/dqb",
                        component: dqb,
                    }]
            },
            {
                path: "/invest/lc",
                component: lc,
                children: [{
                    path: "/invest/lc/hy",
                    component: hy,
                },
                {
                    path: "/invest/lc/ht",
                    component: ht,
                }]
            }]
        },
        {
            // 写到最后
            path: "/*",
            redirect: "/invest"
        }]
    const router = new VueRouter({
        routes,
    })
    let vm = new Vue({
        el: '#app',
        data: {
            name: "洋"
        },
        router,
    })
</script>
复制代码

导航式传参

  • query传参 {path:/son1,query:{a:1,b:2}}} 在每一个组件通过this.route.query 属性可以获取到router中放的一些方法

  • params传参

  • 获取在每一个组件的·this.$route.params

  • 重定向 :redirect

  • 嵌套： children

  • 编程式导航 this.$router.push replace() back go push({path:"son1"})

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <button @click="fn">跳转</button>
        <!-- $router.back回退按钮 -->
        <button @click="$router.go(-1)">回退</button>
        <router-view></router-view>
    </div>
</body>

</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>

    let son = {
        template:`<h1>son</h1>`
    }
    const router = new VueRouter({
        routes: [{
            path: "/son",
            component: son
        }]
    })
    let vm = new Vue({
        el: '#app',
        data: {
            name: "洋"
        },
        router,

        created() {
            console.log(this)
        },
        methods: {
            fn() {
                setTimeout(() => {
                    // 一秒之后再去跳转
                    // this.$router.params
                    console.log( this.$router.params)
                    // this.$router.query
                    // this.$router.push("/son")
                    this.$router.push({path:"/son",query:{a:12,b:13}})
                    //push的参数跟to后边的值保持一致

                    // this.$router.replace({ path: "/son", query: { a: 12, b: 13 } })
                    // replace和push参数用法一样；
                    // 区别在与replace不会新增一条记录
                    // push会产生一条新的记录

                    // back相当于点击浏览器的回退按钮
                    // go(n) n是几就跳几步 ；正数往前跳负数往回跳几步 n=-1时相当于back
                }, 1000)
            }
        }
    })
</script>
复制代码

相关文章：

  • 【转】FPGA内部小数计算
  • LeetCode算法题-Non-decreasing Array（Java实现）
  • 我的IT转行之路
  • 读书笔记之《实战Java虚拟机》（6）：性能监控工具
  • B-树(B+树) 学习总结
  • 【DAY24】内省，NIO的学习笔记
  • 双亲委派模型与Tomcat类加载架构
  • JavaScript事件详解
  • 明文存密码成惯例？Facebook 6 亿用户密码可被 2 万员工直接看
  • 用grunt搭建自动化的web前端开发环境-完整教程
  • 强化学习遭遇瓶颈！分层RL将成为突破的希望
  • [改善Java代码]不同的场景使用不同的泛型通配符
  • Java 混淆那些事（二）：认识 ProGuard GUI
  • yii2权限控制rbac之rule详细讲解
  • Solr简单介绍
  • 【干货分享】SpringCloud微服务架构分布式组件如何共享session对象
  • laravel with 查询列表限制条数
  • passportjs 源码分析
  • python docx文档转html页面
  • swift基础之_对象 实例方法 对象方法。
  • Vim Clutch | 面向脚踏板编程……
  • 阿里云爬虫风险管理产品商业化，为云端流量保驾护航
  • 第十八天-企业应用架构模式-基本模式
  • 开发了一款写作软件(OSX,Windows)，附带Electron开发指南
  • 前端知识点整理（待续）
  • 前嗅ForeSpider中数据浏览界面介绍
  • 软件开发学习的5大技巧，你知道吗？
  • 深度学习在携程攻略社区的应用
  • 我有几个粽子，和一个故事
  • 用 Swift 编写面向协议的视图
  • 06-01 点餐小程序前台界面搭建
  • FaaS 的简单实践
  • ionic入门之数据绑定显示-1
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • #define
  • #include
  • #Js篇：单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • （C语言）fread与fwrite详解
  • （板子）A* astar算法，AcWing第k短路+八数码 带注释
  • (黑客游戏)HackTheGame1.21 过关攻略
  • （三十五）大数据实战——Superset可视化平台搭建
  • (一)Neo4j下载安装以及初次使用
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (正则)提取页面里的img标签
  • ./和../以及/和~之间的区别
  • .bashrc在哪里，alias妙用
  • .bat批处理（七）：PC端从手机内复制文件到本地
  • .net core 6 集成 elasticsearch 并 使用分词器
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .NET/C# 避免调试器不小心提前计算本应延迟计算的值
  • .NET开源快速、强大、免费的电子表格组件
  • .NET应用架构设计：原则、模式与实践 目录预览
  • .sdf和.msp文件读取
  • @EnableConfigurationProperties注解使用
  • @Query中countQuery的介绍