vue常用操作及学习笔记（路由跳转及路由传参篇）

megatron 发布于2019-08-23 11:27 / 3127人阅读

摘要：也可以从其他文件进来定义路由每个路由应该映射一个组件。其中可以是通过创建的组件构造器，或者，只是一个组件配置对象。

路由跳转 - 超链接方式跳转

html：


    Hello App!
    
        
        
        
        Go to Foo
        Go to Bar

router.js：

import Vue from "vue";
import vueRouter from "vue-router";
Vue.use(vueRouter);
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
 
// 1. 定义（路由）组件。
// 也可以从其他文件 import 进来
const Foo = { template: "foo" }
const Bar = { template: "bar" }
 
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
    { path: "/foo", component: Foo },
    { path: "/bar", component: Bar }
]
 
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
    routes // （缩写）相当于 routes: routes
})
 
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
    router
}).$mount("#app")
 

export default router

路由跳转 - 函数方法跳转

this.$router.push();

query方式传参和接收参数

//query方法传值
this.$router.push({path : "/xxx", query : { data }})
//query方法取值
this.$route.query.data

注意:传参是this.$router,接收参数是this.$rout

params方式传参和接收参数

//params方法传值
this.$router.push({name : "xxx", params : { data }})
//params取值
this.$route.params.data

注意:params传参，push里面只能是 name:"xxxx",不能是path:"/xxx"

区别：直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示 拓展：this.$router 和this.$route有何区别？

1.$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
2.$route为当前router跳转对象，里面可以获取name、path、query、params等

注意：使用query方式传值刷新页面后参数不会丢失，使用params方式传值，参数会丢失，使用时需要权衡

海外云主机服务器托管传参篇笔记本怎么连接无线路由器 linux常用命令及操作 vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96989.html

前端面试知识点目录整理

摘要：写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

xzavier 2019-08-23 16:14 评论0 收藏0
前端面试知识点目录整理

摘要：写在前面金三银四又到了一年一度的跳槽季相信大家都在准备自己面试笔记我也针对自己工作中所掌握或了解的一些东西做了一个目录总结方便自己复习详细内容会在之后一一对应地补充上去有些在我的个人主页笔记中也有相关记录这里暂且放一个我的面试知识点目录大家写在前面: 金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自...

enda 2019-08-02 16:08 评论0 收藏0
2017-08-02 前端日报

摘要：前端日报精选浮点数精度之谜前端面试必备基本排序算法从贺老微博引出的遍历器加速那些奥秘进阶之深入理解数据双向绑定全栈天中文深入理解笔记用模块封装代码前端架构经验分享周二放送自制知乎专栏译在大型应用中使用的五个技巧掘金开发指南众成 2017-08-02 前端日报精选 JavaScript 浮点数精度之谜前端面试必备——基本排序算法从贺老微博引出的遍历器（Iterators）加速那些奥秘J...

Worktile 2019-08-20 18:29 评论0 收藏0
Vue学习笔记之vue-cli项目搭建及解析

摘要：样式通过标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加，如要引入外部文件，首先需给项目安装依赖包，打开，进入项目目录，输入回车。 showImg(https://segmentfault.com/img/remote/1460000013235090); （一）安装node.js 首先需要安装node环境，可以直接到中文官网http://nodejs.cn/...

Caizhenhao 2019-08-26 11:41 评论0 收藏0