6、路由跳转之二级路由children的实现入门版

在vue项目中，经常会用到路由跳转，二级路由更是必须要掌握的，下面给大家分享一下二级路由是实现
二级路由是建立在一级路由之上的，现在写一个一级路由

//页面上写标签
<span v-for="(a,i) in nav" @click="go(i)">{{a}}</span>
//下面写方法
data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      nav:["首页","热点","购物车","我的"],
      navs:["/shouye","/redian","/gouwuche","/wode"]
    }
  },
  methods:{
    go(i){
        this.$router.push(this.navs[i])
    }
  }
//index.js路由里面引刚才所写的路由
import shouye from '@/components/shouye'
import redian from '@/components/redian'
import gouwuche from '@/components/gouwuche'
import wode from '@/components/wode'
{
      path: '/shouye',
      name: 'shouye',
      component: shouye
    },{
      path: '/redian',
      name: 'redian',
      component: redian
    },{
      path: '/gouwuche',
      name: 'gouwuche',
      component: gouwuche
    },{
      path: '/wode',
      name: 'wode',
      component: wode
    },

//这样我们一级路由就做好了
//ps：关于页面布局：给span放到div里给div相对浏览器底部定位，flex布局即可

//现在我们在购物车页面做二级路由
//在购物车页面也写两个标签，分别代表喜欢和收藏，
//点击事件就是路由跳转，跳转的地址是：基于当前页面地址+子路由地址

<span @click="go('/gouwuche/shoucang')">收藏</span>
<span @click="go('/gouwuche/xihuan')">喜欢</span>

//然后就是在路由index.js页面的操作

{
      path: '/gouwuche',
      name: 'gouwuche',
      component: gouwuche,
      children:[
        {
            path: '/gouwuche/shoucang',
            component: shoucang,
        },
        {
            path: '/gouwuche/xihuan',
            component: xihuan,
        },
        {
            path: '/gouwuche/',
            component: shoucang,
        }
      ]
    },
//因为是在购物车页面写的子路由所以children（孩子）里面
//写在购物车路由下面，里面path的地址跟页面上的跳转地址一样，本页面下面的子页面

这样一个简单的二级路由就做好了，如果对你有帮助，记得关注+喜欢