vue-router -- 编程式路由

一、概述

• 通过JavaScript实现页面跳转
• 相关函数
  
  • $router.push(“name”);
  • $router.push({path:”name”});
  • $router.push({path:”name”?a=123}); //传参
  • $router.push({path:”name”，query:{a=123}});
  • $router.go();
  • 参数查询：$router.query.[参数名]

二、代码展示
- 目录结构

• cart.vue

<template>
    <div>这里是购物车
        <span>{{$route.query.a}}</span>
    </div>
</template>

• goods.vue

<template>
    <div>
        商品列表
        <router-link to="/goods/title">标题</router-link>
        <router-link to="/goods/img">图片</router-link>
        <div>
            <router-view>

            </router-view>
        </div>
        <button @click="toCart">去购物车</button>
    </div>
</template>

<script>
    export default {
        methods:{
            toCart(){
                //this.$router.push("/carts");
                //this.$router.push({path:"/carts"});
                this.$router.push({path:"/carts?a=123"});
            }
        }
    }
</script>

<style>

</style>

• index.js

import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'
import Title from '@/Goodlists/title'
import Img from '@/Goodlists/img'
import Cart from '@/Goodlists/cart'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods',
      name: 'Goodlists',
      component: Goodlists,
      children:[
      {
        path:'title',
        name:'title',
        component:Title
      },
      {
        path:'img',
        name:'img',
        component:Img
      }
      ]
    },
    {
        path:'/carts',
        name:'carts',
        component:Cart
    }
  ]
})

注意这儿的参数获取方式和动态路由的参数获取方式不同。