hwdglasses home page push

1.创建 listvc.vue

<template>    <div class="listBox">       test-view    </div></template><script>     export default{}</script><style scoped>    .listBox{      position: fixed;      top: 0;      left: 0;      right: 0;      bottom: 0;      background: rebeccapurple;      z-index: 100;}</style>

2.配置路由 index.js

import Vue from 'vue'import Router from 'vue-router'import Home from '../../src/components/Home/home.vue'import ListVC from '../../src/components/Home/listvc.vue'Vue.use(Router)const routers = new Router({  routes: [    {      path: '/home',      name: 'homeModule',      meta:{title:'首页'},      component: Home,      children:[        {          name:'listModule',          path:'/listvc',          component:ListVC,        }      ]    },    {      path: '*',      redirect: '/home'    }  ]})export default routers;

3.home.vue

<template>    <div class="homeContainer">      <k-slider :banners="sliders" :swiperOption="swiperOption"></k-slider>      <k-glasess @glassesClick="glassesClick"></k-glasess>      <k-recommend :recommendArray="recommends"></k-recommend>      <k-hot-sell :productsArray="products"></k-hot-sell>      //需要用routeview承载子路由      <router-view></router-view>    </div></template>

methods:{    glassesClick:function (ID,title) {       // push        this.$router.push({          name:'listModule',          params:{ID:ID,title:title},        })    }},

导航

<div class="listnav">  <img @click="backAction" class="back" src="http://img.blog.csdn.net/20171107133347623">  <span class="titleA">标题</span></div>

methods:{  backAction:function () {    //返回导航控制器    this.$router.back()  }}

//导航.listnav{  height: 64px;  width: 100%;  background: white;  text-align: center;}//返回.listnav img{  width: 15px;  height: 25px;  position: absolute;  left: 16px;  top: 25px;}//标题.listnav span{  display: inline-block;  font-size: 16px;  height: 44px;  line-height: 44px;  color: black;  margin-top: 20px;}

获取导航参数

{{this.$route.params.title}}

导航返回

this.$router.back()