vue-router实现组件间的跳转（参数传递）

通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下

login ---用户名--->main

①明确发送方和接收方

②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}

③接收方获取传递来的数据
this.$route.params.id

④跳转的时候，发送参数
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳转</router-link>

代码：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>传参</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <!--指定容器 -->
    <router-view></router-view>
  </div>
  <script>
  //创建主页面组件
    var myMain = Vue.component("main-component",{
      //保存登录传递过来的数据
      data:function(){
    return {
     uName:''
    }
   },
      template:`
        <div>
          <h1>主页面用户名:{{uName}}</h1>
        </div>
      `,
      //挂载该组件时自动拿到数据
      beforeMount:function(){
        //接收参数
        console.log(this.$route.params);
        this.uName = this.$route.params.myName ;
      }
    })
    //创建登录页面组件
    var myLogin = Vue.component("login-component",{
      //保存用户输入的数据
      data:function(){
        return {
          userInput:""
        }
      },
      methods:{
        toMain:function(){
          //跳转到主页面，并将用户输入的名字发送过去
          this.$router.push("/main/"+this.userInput);
          console.log(this.userInput);
        }
      },
      template:`
        <div>
          <h1>登录页面</h1>
          <input type="text" v-model="userInput" placeholder="请输入用户名">
          <button @click="toMain">登录到主页面</button>
          <br>
          <router-link :to="'/main/'+userInput">登录到主页面</router-link>
        </div>
      `
    })
    var NotFound = Vue.component("not-found",{
      template:`
        <div>
          <h1>404 Page Not Found</h1>
          <router-link to="/login">返回登录页</router-link>
        </div>
      `
    })
    //配置路由词典
    const myRoutes = [
      {path:"",component:myLogin},
      {path:"/login",component:myLogin},
        //注意冒号,不用/否则会当成地址
      {path:"/main/:myName",component:myMain},
      //没有匹配到任何页面则跳转到notfound页面
      {path:"*",component:NotFound}
    ]
    const myRouter = new VueRouter({
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
//  注意,路由地址
  </script>
 </body>
</html>

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>传参练习</title>
  <script src="js/vue.js"></script>
  <script src="js/vue-router.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
<!-- -->
    <router-view></router-view>
  </div>
  <script>
//创建产品列表组件
    var myList = Vue.component("product-list",{
      //保存产品列表的数据
      data:function(){
        return{
          productList:["苹果","华为","三星","小米","vivo"]
        }
      },
      template:`
        <div>
          <h4>这是列表页</h4>
          <ul>
            <li v-for="(tmp,index) in productList">
            //将index传递过去
              <router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
            </li>
          </ul>
        </div>
      `
    })
//详情页组件
    var myDetail = Vue.component("product-detail",{
      //保存传递过来的index
      data:function(){
        return{
          myIndex:""
        }
      },
      //在挂载完成后,将接收到的index赋值给myIndex
      mounted:function(){
          this.myIndex = this.$route.params.id;
      },
      template:`
        <div>
          <h4>这是详情页</h4>
          <p>这是id为：{{myIndex}}的产品</p>
        </div>
      `
    })
//页面找不到的时候
    var NotFound = Vue.component("not-found",{
      template:`
        <div>
          <h1>404 Page Not Found</h1>
        </div>
      `
    })
//  配置路由词典
    const myRoutes = [
      {path:"",component:myList},
      {path:"/list",component:myList},
      {path:"/detail/:id",component:myDetail},
      {path:"*",component:NotFound},
    ]
    const myRouter = new VueRouter({
      routes:myRoutes
    })
    new Vue({
      router:myRouter,
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)

    我发现好多倒计时的插件,刷新都会变成从头再来,于是自己用vue2.0写了一个,测试通过,直接上代码 如下是组件代码: <template> <span :endTime="endTime" :callback="callback" :endText="endText"> <slot> {{content}} </slot> </span> </template> <sc

  • Vue利用路由钩子token过期后跳转到登录页的实例

    在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • vue-router跳转页面的方法

    使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

  • Vue.js实战之利用vue-router实现跳转页面

    Vue.js实战之利用vue-router实现跳转页面

    前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

  • Vue实现路由跳转和嵌套

    Vue实现路由跳转和嵌套

    一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级 然后在 router.js 中引入所需的组件,创建 routers 对象 import Home from './components/home.vue' const routers = [ { path: '/home', name: 'h

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • Vue路由跳转问题记录详解

    Vue路由跳转问题记录详解

    最近项目上需要用Vue用来做app,在Vue中使用路由时遇到下面的问题. 路由设置如下: { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'layoutView/:layoutId', name:'LayoutView', component:LayoutView },{ path:'layoutDetail/:viewId'

  • Vue Transition实现类原生组件跳转过渡动画的示例

    Vue Transition实现类原生组件跳转过渡动画的示例

    最近学习了Vue Transition的用法,感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 官方文档:https://cn.vuejs.org/v2/guide/transitions.html 演示地址:http://www.coderlife.com (请在移动端查看,PC端查看请打开移动端调试模式) 前言 看了挺多Vue的UI框架都不带过渡动画,今天心血来潮,就把自己平时用的动效抽离出来.可直接通过脚手架init模版配合其他UI框架使用,不需要另外进行配置. 原理 模版中

随机推荐