Vue Router相关理解2

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量362 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bubbleJessica/article/details/131769173
版权

路由的query参数

传递参数

<!-- <router-link to="/home/message/detail?id=666&title=你好啊">{{ m.title }}</router-link> -->
                <!-- 跳转路由并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                {{ m.title }}
                </router-link>

冒号to先转换成js语句，然后再使用模板字符串 

接收参数

$route.query.id
$route.query.title

案例

src/router/index.js

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- <router-link to="/home/message/detail?id=666&title=你好啊">{{ m.title }}</router-link> -->
                <!-- 跳转路由并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link :to="{
                    path:'/home/message/detail',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                {{ m.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'Message',
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001' },
                { id: '002', title: '消息002' },
                { id: '003', title: '消息003' },
            ]
        }
    }
}
</script>

src/pages/Detail.vue

<template>
  <ul>
    <li>消息编号：{{ $route.query.id }}</li>
    <li>消息标题：{{ $route.query.title }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail',
}
</script>

命名路由

作用：可以简化路由的跳转

src/router/index.js

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'xiangqing',//命名路由
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- <router-link to="/home/message/detail?id=666&title=你好啊">{{ m.title }}</router-link> -->
                <!-- 跳转路由并携带query参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->

                <!-- 跳转路由并携带query参数，to的对象写法 -->
                <router-link :to="{
                    // path:'/home/message/detail',
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                {{ m.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'Message',
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001' },
                { id: '002', title: '消息002' },
                { id: '003', title: '消息003' },
            ]
        }
    }
}
</script>

params参数

src/router/index.js

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'xiangqing',
                            path: 'detail/:id/:title',  //使用占位符声明接收params参数
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue

<template>
  <ul>
    <li>消息编号：{{ $route.params.id }}</li>
    <li>消息标题：{{ $route.params.title }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail',
}
</script>

src/pages/Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- <router-link to="/home/message/detail/666/你好啊">{{ m.title }}</router-link> -->
                <!-- 跳转路由并携带params参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->
                <router-link :to="{
                    name:'xiangqing',
                    params:{
                        id:m.id,
                        title:m.title
                    }
                }">
                {{ m.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'Message',
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001' },
                { id: '002', title: '消息002' },
                { id: '003', title: '消息003' },
            ]
        }
    }
}
</script>

特别注意：路由携带params参数，若使用to的对象写法，则不能使用path配置项，必须使用name配置

路由的props配置

src/route/index.js

import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            name:'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name:'xiangqing',
                            path: 'detail/:id/:title',  //使用占位符声明接收params参数
                            component: Detail,

                            //第一种写法：props值为对象，该对象中所有的key-value的组合都会通过props传给Detail组件
                            // props:{a:'100',b:'1'},
                            //第二种写法：props值为true，则把路由收到的所有params参数通过props传给Detail组件
                            // props:true,
                            //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
                            props($route){
                                return{
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue

<template>
  <ul>
    <li>消息编号：{{ id }}</li>
    <li>消息标题：{{ title }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Detail',
  props:['id','title']
}
</script>

src/pages/Message.vue

<template>
    <div>
        <ul>
            <li v-for="m in messageList" :key="m.id">
                <!-- <router-link to="/home/message/detail/666/你好啊">{{ m.title }}</router-link> -->
                <!-- 跳转路由并携带params参数，to的字符串写法 -->
                <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{ m.title }}</router-link> -->

                <!-- 跳转路由并携带params参数，to的对象写法 -->
                <router-link :to="{
                    name:'xiangqing',
                    query:{
                        id:m.id,
                        title:m.title
                    }
                }">
                {{ m.title }}
                </router-link>
            </li>
        </ul>
        <hr>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: 'Message',
    data() {
        return {
            messageList: [
                { id: '001', title: '消息001' },
                { id: '002', title: '消息002' },
                { id: '003', title: '消息003' },
            ]
        }
    }
}
</script>

bubbleJessica
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈对vueRouter的理解
01-08
我们都知道在vueRouter中，浏览器下可以通过mode字段来控制路由的模式，而vueRouter将路由模式分为了两个类型： hash模式 history模式 首先可以了解一下是如何通过mode字段来实现路由的模式分配的，VueRouter的默认...
深入Vue-Router路由嵌套理解
12-09
接着我继续追问…(省略)…大致明白了情况，原来这位朋友没有理解Vue-Router嵌套的原理，下面整理了一下我对Vue-Router路由嵌套的理解 Vue-Router嵌套路由 首先假设项目中有两个路由Profile和Posts，按写法把他们...
Vue Router 相关理解 基本路由 多级路由
weixin_44230693的博客
06-27 554
Vue Router 相关理解 基本路由 多级路由
关于vue-router的理解
山海一哥的博客
01-14 647
很多人可能对路由有时有些疑惑，一会从外往内嵌套，有时内部就可以了，那么究竟是为什么呢?今天就来解析一下，如图所示 正如图上的路由写法是从外往内的，如果这里的嵌套路由如’posts’改为’./posts’，路由的写法不变，但是如果使用了’/posts’，那么上面的路由写法是找不到对应的路由组件的，此时的匹配路由不是’/user/:id/posts’而是’/posts’,可以认为后者是前者的简写形式，...
Vue Router简单理解
qq_45060976的博客
03-26 1399
Vue Router简单理解 Vue Router是Vue.js 官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面变得更加的简单主要有三个模块 <router-link> <router-view> <router-alive> 导航守卫 导航守卫主要是通过跳转或取消的方式守卫导航 简单点说。导航守卫就是路由跳转过程中的一些钩子函数，路由跳转分为很多小的过程，每一个过程中都有一个函数，这些函数能够让你在某个过程操作一些其他的事情，这就是导航守卫。 路由导航
vue-router的理解
这可不是一般的博客，这是王维诗里的博客
05-23 284
vue-router详解 路由的概念 通过改变URL，在不重新请求页面的情况下，更新页面视图 更新视图但不重新请求页面是前端路由原理的核心之一，它共有两种路由模式，默认为hash模式 hash模式：利用url中的hash("#") history：利用url中的路径("/home") 如何设置路由模式 const router=new VueRouter({ mode:'history', routes:[...] }) 两种路由模式下mode的区别 mode："hash"多了“
Vue2.x - Vue Router
伏城之外的博客
06-24 1519
目录Vue与SPA什么是SPA简单了解SPA什么是MPASPA相较于MPA的优点实现SPA的几个关键点理解SPA单页面架构什么是前端路由锚链接与URL中的hash值通过hashchange事件实现前端路由编程式导航浏览器历史记录&前进后退功能Vue与SPA通过Vue认识SPA单页面丰富内容的来源在Vue中实现前端路由Vue Router安装和配置Vue Router下载vue-router引入vue-router到项目中注册VueRouter插件 创建VueRouter实例并将其关联vm.$options.
【Vue2】VueRouter
Superman_H的博客
02-10 2565
# 路由的概念 **SPA：** - SPA (Single Page Application，单页面应用)，整个应用只有一个完整的页面，所有组件的展示、隐藏都在这一个页面中完成。 - **不同组件之间的切换**需要通过**前端路由**来实现，数据需要通过 Ajax 获取。 - 缺点：1. 首屏加载速度较慢、 2. 不利于 SEO。对应的优化方法：1. 路由懒加载、代码压缩、CDN 加速、网络传输压缩、 2. SSR 服务器端渲染。 **路由：** 1. 后端路由：**请求方
如何理解Vue-router
Mr__proto__的博客
10-27 135
Vue -router 是一个插件使用方法如下 1:下载 npm i vue-router -S 2:在main.js中引入 import VueRouter from ‘vue-router’; 3:安装插件 Vue.use(VueRouter); 4:创建路由对象并配置路由规则 5:将其路由对象传递给Vue的实例，options中加入 router:router 6:在app.vue中留坑 个人理解: Vue-router是一种映射关系,一个路径对应一个组件,由于Vue是单页面应用(SPA),只有一个i
对vue-router理解
jiangshen_a的博客
08-31 387
对vue-router理解
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
vue router的理解
Site_Dave的博客
04-23 817
此文章用来系统讲解vue-router路由 1. 安装 只介绍npm安装 npm install vue-router --save 项目所需依赖 在main.js或者app.vue中导入 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); 现在你就可以开始使用vue-router...
vue2 设置router-view默认路径的实例
10-17
Vue2.x版本中，设置`router-view`的默认路径是一个常见的需求，尤其是在构建多页面应用时，我们需要定义一个默认的入口页面，当用户访问应用时自动加载。下面将详细讲解如何在Vue2中设置`router-view`的默认路径。 ...
深入理解Vue router的部分高级用法
01-21
今天要介绍的是路由元信息，滚动行为以及路由懒加载这几个的使用方法。...import Router from 'vue-router' import Login from '../login/Login' import Home from '../pages/Home' export default new Router({ m
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 282
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 363
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 829
vue初使用实例之笔记本
vue面试题汇总之响应式理解
fyw1789的博客
06-12 405
vue在全局中写了一个用来运行函数的函数,有一个全局变量保存当前运行的是哪个函数,这样在getter的时候只要检查这个全局变量就知道是哪个函数在使用这个变量了,vue还建立了一个对映关系表当setter的时候把对映表中的函数重新运行一遍。vue2使用Object.defineProperty进行数据代理(getter和setter),vue3使用Proxy进行数据代理。会把函数放入异步队列,同一个渲染函数只会存在一个,这样就不会多次渲染造成效率问题。,当需要派发更新的时候不会立即运行函数,而是交给。
Ant Design Vue 动态表头与数据填充教程
学习编程的小羊的博客
06-11 386
安装并引入 Ant Design Vue 组件库。准备动态表头和数据的状态。发起请求获取表头和数据。将获取到的表头和数据赋值给组件的状态。使用a-table组件渲染表格，并传入动态表头和数据。根据需要为表格添加样式。
vue router教学
08-21
官方文档提供了清晰的指导和示例，可以帮助你学习和理解Vue Router的使用方法。你可以按照官方文档的步骤，逐步学习和实践Vue Router的用法。<span class="em">1</span><span class="em">2</span><span class="em">...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值