结构目录

1. 页面传值(不同之间的页面传值)

  1.1 index.js配置

源码:

 // 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// Home
import Home from '@/components/Home' import One from '@/components/One' // Vue全局使用Router
Vue.use(Router) // 定义路由配置
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'Home', //路由名称,
component: Home, //对应的组件模板
alias: '/home'
},
{
path:'one', // 子页面1
name: 'one', // 路由名称-命名路由
component:One
}
]
})

  1.2配置Home.vue

源码:

 <template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由导航 -->
<p>导航 :
<router-link :to="{name: 'one', params:{username:'test123'}}">子页面1</router-link>
</p>
<!-- 子页面展示部分 -->
<router-view/>
</div>
</template> <script>
export default {
name: "Home",
data() {
return {
msg: "Home Page!"
};
}
};
</script> <style scoped>
</style>

  1.3配置One.vue

源码:

 <template>
<div class="hello">
<h2>{{msg}} - {{$route.params.username}}</h2>
</div>
</template> <script>
export default {
name: "one",
data() {
return {
msg: "Welcome to One!"
};
}
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

2. url传值(传递参数-同页面->向下page传值)

  2.1:设置路由

  2.2:传值

  2.3:主页面获取参数

3. 编程式导航-params传递参数

  3.1:设置路由

  3.2:设置传递参数

  说明:
    A、动态路由使用params传递参数,在this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。
    B、以上方式参数不会显示到浏览器的地址栏中,如果刷新一次页面,就获取不到参数了

  3.3:接收参数并且显示

4.编程式导航-query传递参数

  4.1:修改传递参数形式

  4.2:修改接收参数形式

5.以上两种方式,有什么不同呢?paramsquery

  5.1 query传参

  5.2:params传参

vue - 路由传递参数的更多相关文章

  1. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

  2. 【转载】【笔记】vue-router之路由传递参数

    参考博客地址:https://blog.51cto.com/4547985/2390799 1.通过<router-link> 标签中的to传参 基本语法: <router-link ...

  3. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  4. angular4.0路由传递参数、获取参数最nice的写法

    研究ng4的官网,终于找到了我想要的方法.我想要的结果是用'&'拼接参数传送,这样阅读上是最好的.否则很多'/'的拼接,容易混淆参数和组件名称.一般我们页面跳转传递参数都是这样的格式:http ...

  5. vue-router路由传递参数 + get传值query获取

    [步骤] (1)路由配置 或者 (2)传递参数 或者 (3)接收传递参数 或者 [二]步骤小结 [三]参数形式 (1)上面这种是/100形式传递过去 (2)另外还有?count=100的格式,这便是g ...

  6. angularjs路由传递参数

    ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: $state.go('someState')一般使用在 controller里面 ...

  7. vue router 传递参数

    vue-router 传参的方式 query 和params query 类似于get请求的传参方法 就是 ? 这种形式的 https://i.cnblogs.com/EditPosts.aspx?o ...

  8. VUE路由携带参数的三种方式

    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...

  9. vue路由传参丢失问题

    vue路由传递参数如果用params传递参数,那么页面刷新就会丢失数据,可以改用query来传递参数,这样刷新就不会丢失

随机推荐

  1. python中对list去重的多种方法

    今天遇到一个问题,用了 itertools.groupby 这个函数.不过这个东西最终还是没用上. 问题就是对一个list中的新闻id进行去重,去重之后要保证顺序不变. 直观方法 最简单的思路就是: ...

  2. Codeforces 839E Mother of Dragons(极大团)

    [题目链接] http://codeforces.com/contest/839/problem/E [题目大意] 现在有一些点,现在你有k的液体,随意分配给这些点, 当两个点有边相连的时候,他们能产 ...

  3. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  4. CentOS6 下编译安装 MySQL 5.6.26

    CentOS6下通过yum安装的MySQL是5.1版的,比较老,所以就想通过源代码安装高版本的5.6.26. 一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | ...

  5. 让Firefox支持offsetX、offsetY

    //计算光标相对于第一个定位的父元素的坐标 function coordinate(e){ var o = window.event || e, coord, coord_X, coord_Y; co ...

  6. ida plug-in helloworld

    #include <ida.hpp> #include <idp.hpp> #include <loader.hpp> #include <kernwin.h ...

  7. windows及linux下安装django simple captcha 遇到的各种问题及解决的方法

    转载自http://www.cnblogs.com/descusr/p/3225874.html 全部程序写完之后,验证码图片不显示,点击图片地址会提演示样例如以下错误,而且在linux下的纠正办法 ...

  8. 开始整理iOS职位面试问题及答案

    Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? 答: Object-c的类不可以多重继承;可以实现多个接口,通过实现多个接 ...

  9. vc维的解释

    在做svm的时候我们碰到了结构风险最小化的问题,结构风险等于经验风险+vc置信范围,当中的vc置信范围又跟样本的数量和模型的vc维有关,所以我们看一下什么是vc维 首先看一下vc维的定义:对一个指标函 ...

  10. jquery省市选择案例

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...