【VUE】六 路由和传值

已于 2023-02-28 16:54:50 修改
阅读量493 收藏
点赞数 1
分类专栏： VUE 文章标签： 前端
于 2023-02-28 16:44:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/legend818/article/details/129263962
版权

目录

一、 路由和传值

二、案例

三、案例存在无法刷新问题

一、 路由和传值

当某个组件可以根据某些参数值的不同，展示不同效果时，需要用到动态路由。

例如：访问网站看到课程列表，点击某个课程，就可以跳转到课程详细页面（根据课程ID不同展示不同数据）。

如何来设置动态路由呢？

  • 定义路由（可以使用别名定义路由、可以实现动态值）

const router = new VueRouter({
    routes: [
        { path: '/', component: Home},
        { path: '/course', component: Course, name: "Course"}
        { path: '/detail/:id', component: Detail, name: "Detail"}
    ],
})

HTML展示：（前三个就写死了）

<div>
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/detail/123">课程</router-link>
    
    <router-link :to="{path:'/course'}">课程</router-link>
    <router-link :to="{path:'/course?size=19&page=2'}">课程</router-link>
    <router-link :to="{path:'/course', query:{size:19,page:2}">课程</router-link>
    
    <router-link :to="{name:'Course'}">课程</router-link>
    <router-link :to="{name:'Course', query:{size:19,page:2} }">课程</router-link>

    <router-link :to="{path:'/detail/22',query:{size:123}}">Linux</router-link>
    <router-link :to="{name:'Detail',params:{id:3}, query:{size:29}}">网络安全</router-link>
</div>

<h1>内容区域</h1>
<router-view></router-view>

组件获取URL传值和GET参数

 const Detail = {
     data: function () {
         return {
             title: "详细页面",
             paramDict: null,
             queryDict: null,

         }
     },
     created: function () {
         this.paramDict = this.$route.params;
         this.queryDict = this.$route.query;
         // 发送axios请求
     },
     template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}}  {{queryDict}}</div></div>`
 }

二、案例

结合上面的路由实现案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 1100px;
            margin: 0 auto;
        }

        .menu {
            height: 48px;
            background-color: #499ef3;
            line-height: 48px;

        }

        .menu a {
            color: white;
            text-decoration: none;
            padding: 0 10px;
        }

        .course-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .course-list .item {
            width: 248px;
            padding: 10px;
            border: 1px solid #dddddd;
            margin-right: 5px;
            margin-top: 10px;
        }

        .course-list .item img {
            width: 100%;
            height: 120px;
        }
    </style>


    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div class="menu">
        <div class="container">
            <router-link to="/">申请入会</router-link>
            <router-link to="/home">首页</router-link>
            <router-link to="/course">写真</router-link>
            <router-link to="/news">资讯</router-link>
        </div>
    </div>
    <div class="container">
        <router-view></router-view>
    </div>

</div>

<script>

    const Home = {
        data: function () {
            return {
                title: "欢迎进入交友平台"
            }
        },
        template: `<h2>{{title}}</h2>`
    }
    const Course = {
        data: function () {
            return {
                courseList: []
            }
        },
        created: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
                 - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                 - 不可以去操作DOM，例如：document.getElementById （未创建）
             */
            axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
                headers: {
                    "Content-Type": "application/json"
                }
            }).then((res) => {
                this.courseList = res.data.data.result;
            })

        },
        mounted: function () {
            /* DOM对象已在页面上生成，此时就可以 */
        },
        template: `
            <div class="course-list">

                <div class="item" v-for="item in courseList">
                    <router-link :to="{name:'Detail',params:{id:item.id}}">
                        <img :src="item.cover" alt="">
                        <a>{{item.name}}</a>
                    </router-link>
                </div>

            </div>`
    }
    const News = {
        data: function () {
            return {
                dataList: []
            }
        },
        created: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
                 - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                 - 不可以去操作DOM，例如：document.getElementById （未创建）
             */
            axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
                headers: {
                    "Content-Type": "application/json"
                }
            }).then((res) => {
                this.dataList = res.data.data.result;
            })

        },
        template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`
    }

    const Detail = {
        data: function () {
            return {
                title: "详细页面",
                courseId: null
            }
        },
        created: function () {
            this.courseId = this.$route.params.id;
            // 此处可以根据课程ID，发送ajax请求获取课程详细信息
        },
        template: `<div><h2>课程详细页面</h2><div>当前课程ID为：{{courseId}}</div></div>`
    }

    const router = new VueRouter({
        routes: [
            {path: '/', component: Home},
            {path: '/home', component: Home},
            {path: '/course', component: Course},
            {path: '/news', component: News},
            {path: '/detail/:id', component: Detail, name: 'Detail'}
        ],
        //mode: 'history'
    })

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router
    })
</script>
</body>
</html>

三、案例存在无法刷新问题

上述编写案例是没有问题，但如果在开发中会涉及到 同一个路由的跳转（默认不会重新加载页面，数据无法获取）。

例如：在详细页面再出现一个课程推荐，即：在课程详细，点击推荐的课程后跳转到课程详细页面（课程ID不同），此时课程的ID还是原来加载的ID，无法获取推荐课程的ID。

如何解决呢？

在课程详细的组件中设置watch属性即可，watch会监测$route 值，一旦发生变化，就执行相应的函数。

const Detail = {
    data: function () {
        return {
            title: "详细页面",
            courseId: null,

        }
    },
    created: function () {
        this.courseId = this.$route.params.id;
        this.getCourseDetail();
    },
    watch: {
        $route:function(to, from) {
            this.courseId = to.params.id;
            // this.getCourseDetail();
        }
    },
    methods: {
        getCourseDetail: function () {
            // 根据this.courseId获取课程详细信息
        }
    },
    template: `<div><h2>{{title}}</h2><div>当前请求的数据 {{paramDict}}  {{queryDict}}</div></div>`
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            width: 1100px;
            margin: 0 auto;
        }

        .menu {
            height: 48px;
            background-color: #499ef3;
            line-height: 48px;

        }

        .menu a {
            color: white;
            text-decoration: none;
            padding: 0 10px;
        }

        .course-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .course-list .item {
            width: 248px;
            padding: 10px;
            border: 1px solid #dddddd;
            margin-right: 5px;
            margin-top: 10px;
        }

        .course-list .item img {
            width: 100%;
            height: 120px;
        }
    </style>

    <script src="./js/vue.min.js"></script>
    <script src="./js/vue-router.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div class="menu">
        <div class="container">
            <router-link to="/">路飞学城</router-link>
            <router-link to="/home">首页</router-link>
            <router-link to="/course">课程</router-link>
            <router-link to="/news">资讯</router-link>
        </div>
    </div>
    <div class="container">
        <router-view></router-view>
    </div>

</div>

<script>

    const Home = {
        data: function () {
            return {
                title: "欢迎使用路飞学城"
            }
        },
        template: `<h2>{{title}}</h2>`
    }
    const Course = {
        data: function () {
            return {
                courseList: []
            }
        },
        created: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
                 - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                 - 不可以去操作DOM，例如：document.getElementById （未创建）
             */
            axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=0',
                headers: {
                    "Content-Type": "application/json"
                }
            }).then((res) => {
                this.courseList = res.data.data.result;
            })

        },
        mounted: function () {
            /* DOM对象已在页面上生成，此时就可以 */
        },
        template: `
            <div class="course-list">

                <div class="item" v-for="item in courseList">
                    <router-link :to="{name:'Detail',params:{id:item.id}}">
                        <img :src="item.cover" alt="">
                        <a>{{item.name}}</a>
                     </router-link>
                </div>

            </div>`
    }
    const News = {
        data: function () {
            return {
                dataList: []
            }
        },
        created: function () {
            /* 组件创建完成之后自动触发【此时组件的对象已创建，但还未将页面先关的DOM创建并显示在页面上】
                 - 可以去操作组件对象，例如：this.courseList = [11,22,33]
                 - 不可以去操作DOM，例如：document.getElementById （未创建）
             */
            axios({
                method: "get",
                url: 'https://api.luffycity.com/api/v1/course/actual/?limit=5&offset=10',
                headers: {
                    "Content-Type": "application/json"
                }
            }).then((res) => {
                this.dataList = res.data.data.result;
            })

        },
        template: `<ul><li v-for="item in dataList">{{item.name}}</li></ul>`
    }

    const Detail = {
        data: function () {
            return {
                title: "详细页面",
                courseId: null,
                hotCourseList: [
                    {id: 1000, title: "python全栈开发"},
                    {id: 2000, title: "异步编程"},
                ],
            }
        },
        created: function () {
            this.courseId = this.$route.params.id;
            // 此处可以根据课程ID，发送ajax请求获取课程详细信息
            this.getCourseDetail();
        },
        watch: {
            $route: function (to, from) {
                this.courseId = to.params.id;
                this.getCourseDetail();
            }
        },
        methods: {
            getCourseDetail: function () {
                // 根据this.courseId获取课程详细信息
            }
        },
        template: `
                <div>
                    <h2>课程详细页面</h2>
                    <div>当前课程ID为：{{courseId}}</div>
                    <h3>课程推荐</h3>
                    <ul>
                        <li v-for="item in hotCourseList">
                            <router-link :to="{name:'Detail', params:{id:item.id}}">{{item.title}}</router-link>
                        </li>
                    </ul>
                </div>`
    }

    const router = new VueRouter({
        routes: [
            {path: '/', component: Home},
            {path: '/home', component: Home},
            {path: '/course', component: Course},
            {path: '/news', component: News},
            {path: '/detail:id', component: Detail, name: 'Detail'}
        ],
        //mode: 'history'
    })

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: router
    })
</script>
</body>
</html>

春天的菠菜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2导航根据路由传值,而改变导航内容的实例
08-28
下面小编就为大家带来一篇vue2导航根据路由传值,而改变导航内容的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue路由传值
weixin_48879122的博客
09-21 4984
本篇文章讲述了vue路由传值的方法和区别;
路由传值
weixin_44727080的博客
03-24 2726
注意1.父组件push使用this.$router.push 2.在子组件中获取参数的时候是this.$route.params 1 、动态路由传值 1.1 配置动态路由 routes:[ //动态路由参数 以冒号开头 {path:'/user/:id',conponent:User} ] 1.2 传值 第一种写法 : <router-link :to="'/user/'+item.id">传值&lt
vue路由传值的几种方式
z_星河的博客
09-13 7338
Vue路由传参总结。
路由传值的方法
weixin_72953424的博客
07-26 2420
南风知我意，吹梦到西洲
Vue 路由传值四种方式
CodingmanNAN的博客
04-25 894
Vue 路由传值的四种方式
vue-router 前端路由之路由传值的方式详解
10-17
主要介绍了vue-router 前端路由之路由传值的方式，本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
组件传值 A.父组件传值给子组件： 基本原理为：props方法 基本写法：例如-父组件对应 Home.vue ；子组件对应 HomeChild.vue 父组件： 1.首先父组件引入子组件，并且注册子组件: improt HomeChild from './...
vue2.0组件之间传值、通信的多种方式(干货)
01-21
一、通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②...
vue中页面(路由)跳转及传值的几种方式 router-link + query + params
最新发布
ougexingfuba的博客
11-24 893
params传参，参数保存在了路由路径后面提前写的对应参数名里。可以这样说，params传的是值，而query是把参数名和值一起传过去了。id=123），所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。params传参，路由路径后面需要写/：参数名/参数名，传过来的参数就保存在这里，不写参数名的时候，用户一刷新传过来的参数就没有了。所以在传多个参数的时候，使用query比较好，如果使用params，还得在路由路径后面创建多个参数名。
vue路由传参的6种方式
一步一个脚印，踏实努力，向着目标前进
08-09 4294
命名路由适用于需要在不同组件之间传递参数的情况，Props传递参数适用于需要在组件之间传递参数的情况，而Vuex状态管理适用于需要在整个应用程序中共享参数的情况。需要考虑参数的类型、数量、动态性、共享性等因素，以及对URL长度和可读性的要求。根据具体的应用场景和需求，可以选择适合的方式来传递参数。在路由定义中给每个路由设置一个唯一的名称，然后通过名称来传递参数。在路由定义中使用props属性来传递参数。在路由定义中使用动态路径参数来传递参数。在路由定义中使用元信息来传递参数。
路由传参的三种方式（query/params）
weixin_45946796的博客
08-28 6254
路由带参数： 传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式 1.params 传参（显示参数）又可分为 声明式 和 编程式 两种方式 声明式router-link：该方式是通过router-link组件的to属性实现，子路由需要提前配置好参数。 <router-link :to="/child/1"> 跳转到子路由 </router-link> 1 { path: '/child/:id',.
路由传递数据
m0_62555895的博客
12-03 366
路由传参
路由三种传参方式
君莫笑
06-15 1万+
vue路由传参的三种方式
vue中this.$router.push()路由传值
ʚ北慕南辞ɞ的博客
06-29 1万+
部门列表页首先需要拿到包裹在路由中传过来的数据，对于本范例而言，就是需要拿到数据中的公司编号，然后在created() 生命周期函数中调用对应方法中的接口，把公司编号作为参数传给后端，然后后端根据公司编号在数据库表中去查询数据，最后把数据打包返回给前端，前端的部门列表页接收数据之后，再把数据展示到公司的部门列表页中。先来描述一下这东西能干什么？而接口文件，则是为了保证，跳转到指定页面后数据的正常显示，一般情况下，这种自身带有参数的跳转，目标页面会接受其所传的参数，然后打包传给后端去查询数据，最后把。
路由传参的几种方式
weixin_71403100的博客
03-25 2805
路由传参的几种方式
vue-router 传值的三种方式
bubbleSweet的博客
06-15 9117
上次被问到路由之间如何传值，我一整个蒙住，但其实在项目中也有用到过，所以今天把这些方法整理出来，以后便于翻阅 1. query 传值 在主页面中写一个按钮，绑定方法 <button @click="sentMesg()">兄弟页面</button> 通过 path 来连接和组件页面 brother 之间的关系 sentMesg(){ this.$router.push({ path:'/brother', query: { .
vue路由传值的几种方法及区别
热门推荐
chenzlyan的博客
10-23 2万+
vue路由传值 对应的路由配置模块 , { path: '/editCardetail', name: 'editCardetail', component: EditCardetail }, 1、使用$router.push 拼接参数传参 this.$router.push('/editCardetail?editType=add') 其中ed...
Vue：路由传参的三种方式
流楚丶格念的博客
06-26 7319
【vue】vue路由传参的三种方式vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。params 传参（显示参数）又可分为 声明式 和 编程式 两种方式该方式是通过 router-link 组件的 to 属性实现，该方法的参数可以是一个字符串路径，或者一个描述地址的对象。使用该方式传值的时候，需要子路由提前配置好参数，例
vue路由夸界面传值
07-27
总结起来，Vue路由夸界面传值可以通过路由参数和查询参数来实现。使用路由参数可以在路由节点中定义参数，并在目标组件中通过`this.$route.params`来获取参数的值。使用查询参数可以在路由路径中使用`?`加上参数名和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值