关于vue看到有很多的知识点和react有很多相近的地方,比如说路由还有一些简单的运用,但是又有一些不同,比如格式、还有写法的一些不同!

所以在这里我总结一下关于vue 关于路由的一些运用:

路由:

1、在总页面中设置路由以及参数名,例如

  {

    path:"/hellopage/:id",

    name:'hellopage',

    component:hellopage

  }

2、在新页面进行配制文件,

  这样点击之后就会跳转到新的页面,有两种方式:

  一:通过路由跳转  :to="/路径/参数"

  二:通过点击按钮,触发函数跳转   @click="跳转函数名”

  <div>

    <router-link  :to="{path:'/hellopage/123'}">第一个点击跳转</router-link>

    <router-link  :to="{path:'/hellopage/789“ query:{userid:9855,username:'liumcb‘}}>第一个点击跳转</router-link>

    <button  @click="clickhandle">这是点击跳转按钮</button>

  </div>

  

  如果是路由跳转,不需要在这个页面有什么额外操作了,若是函数跳转, 则需要添加新的一些methods方法

  methods:{

    clickpage:function(){

    this.$router.path({path:"/hellopage/224",query:{userid:566,name:"liumcb2"}})

  }

}

3、在新的页面接受参数

  export default {

  name:"hellopage",

  data(){

    return (){

    //设置接受参数的参数名

    id:this.$route.params.id.    //接受参数,这个参数就是第一个页面中,配制的参数

    userid:this.$route.query.userid,    //这个参数是从路由中接收到的设置的query参数

    username:this.$route.query.name

    }

  }

}

  在新的页面中使用这些参数

  <div>

    <p>接受的参数id:<span>{{{id}}</span></p>

    <p>接受的参数userid:<span>{{userid}}</span></p>

    <p>接受的参数username:<span>{{username}}</span></p>

  </div>

总结起来 这就是路由的一些用法了,看起来跟react十分相似;

1、其中router-link 中可以添加query={id:'123‘}  query的作用是给链接后面拼接内容。

  例如,原来是  newpage/123?id=123 

  所以,当为链接添加更多参数的时候,可以使用query参数进行拼接url

2、给页面添加子页面的时候,在需要添加子页面的地方添加

  <router-view></router-view>
  并且在router路由的页面引用子页面,并且添加新子页面的路由:
  

  {
    path: '/newpage/:id',
    name: 'newpage',
    component: newpage,
    children:[
      {path:'info/:id',component:info},
      {path:'content/:id',component:content},
    ]
  }
 
 
 
 

 

vue.js 知识点(二)的更多相关文章

  1. vue.js 知识点(四)

    看完了vue.js的官方文档,大概对这些知识有了那么一点的了解了,但是很多具体的运用还不太清楚,现在就总结一下,关于其中的一些知识点的运用: v-bind:  动态绑定指令,默认情况下,是给html ...

  2. vue.js(二)

    一个实例: html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= ...

  3. Vue.js随笔二(新建路由+component+添加样式+变量的显示)

    创建一个页面: 1.首先让我们看一下整个vue.js的目录,如下图所示: 2.现在让我们创建一个页面吧: 2-1首先你需要新建路由(就和建立一个如何找到项目文件的目录一个意思):进入src/route ...

  4. Vue.js知识点总结

    1. Vue.js简介 1.1 Vue.js简介 1.2 创建一个vue实例 2. Vue.js基础 2.1 模板语法 2.2 环境搭建 2.3 生命周期钩子

  5. 从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  7. vue.js 知识点(三)

    ---恢复内容开始--- vue和react相同,都是单项数据流,也就是只能从父组件流向子组件,但是因为根据引用的不同,子组件也是可以经过函数处理流向父组件的!这点跟react十分相似,但是也有不同: ...

  8. Vue.js基础(二)

    属性 可以将数据进行计算得出新的结果,也可以说是一个公式,有缓存. 应用:1,频繁使用的复杂公式. 2,需要监控的-----全局状态的管理 简写:   computed:{ result:functi ...

  9. Vue.js先入个门看看

    使用vue.js原文介绍:Vue.js是一个构建数据驱动的web界面库.Vue.js的目标是通过尽可能简单的API实现响应式数据绑定和组合的视图组件.vue.js上手非常简单,先看看几个例子: 例一: ...

随机推荐

  1. android游戏的增量更新(资源及代码的热更新)

    需求当游戏需要更新时,不必让用户下载新的完整包,只需要通过游戏内部的更新系统自动更新差异包,达到节约用户流量和时间的目的. 大体思路:1.(游戏逻辑用lua等脚本编写的情况)这种方式的增量更新非常简单 ...

  2. 使用tcmalloc编译出现undefined reference to `sem_init'

    tcmalloc是Google开源的一个内存管理库, 作为glibc malloc的替代品,效率大概是gclibc malloc的几倍.想在工程中用上tcmalloc非常的简单,我们采用了静态编译的方 ...

  3. react.js 各种小测试笔记

    首先看一个 基础html  至于其中的 js 问价大家去官网下载就好了. <html> <head> <script src="../build/react.j ...

  4. 13-Oulipo(kmp裸题)

    http://acm.hdu.edu.cn/showproblem.php?pid=1686 Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memo ...

  5. Openssl dsaparam命令

    一.简介 dsaparam指令用来生成和操作dsa参数 二.语法 openssl dsaparam [-inform DER|PEM] [-outform DER|PEM] [-in filename ...

  6. Python爬虫入门七之正则表达式

    在前面我们已经搞定了怎样获取页面的内容,不过还差一步,这么多杂乱的代码夹杂文字我们怎样把它提取出来整理呢?下面就开始介绍一个十分强大的工具,正则表达式! 1.了解正则表达式 正则表达式是对字符串操作的 ...

  7. CentOS-yum基本使用

    CentOS: yum URL: ftp://172.16.0.1/pub/ YUM: yellow dog, Yellowdog Update Modifier yum repository: yu ...

  8. oracle 环境变量(中文显示乱码)

     NLS_LANGSIMPLIFIED CHINESE_CHINA.ZHS16GBK 

  9. JDBC 连接 MySQL 时碰到的小坑

    最近从MS SQL Server换到了MySQL,已经是8.11版本了,安装的时候似乎还用了新的身份认证方式之类的,连接过程中也是磕磕绊绊,碰到很多奇奇怪怪的问题,在此记录下来. 驱动加载: 以前使用 ...

  10. Oracle Nested table、Record

    1.如何在PL/SQL中创建和使用Nested table;2.如何在PL/SQL中创建和使用Record; 1.如何在PL/SQL中创建和使用Nested table DECLARE /**创建一个 ...