demo

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Car from '../views/Car'
import CarDetail from '../views/CarDetail'

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
  },
    {
        path:'/home',
        redirect:'/',  //路由的重定向
    },
    {
        path:'/car',
        name:'car',
        component:Car
    },
    {
        path:'/car/:pk/detail',
        name:'car-detail',
        component:CarDetail
    }
];

const router = new VueRouter({
    mode:'history',
    base:process.env.BASE_URL,
  routes
});

export default router

Car.vue

<template>
    <div class="Car">
        <Nav/>
        <div class="wrap">
            <CarTag v-for="car in cars" :car="car" />
        </div>
    </div>
</template>

<script>
    import Nav from '../components/Nav'
    import CarTag from '../components/CarTag'
    export default {
        name: "Car",
        data(){
            return {
                cars:[],
            }
        },
        components:{
            Nav,
            CarTag,
        },
        beforeCreate(){
            console.log('Car组件要创建了')
        },
        created() {
            console.log('Car组件要创建成功了')
            //前后台开发时，是从后台请求数据
            this.cars=[
                {
                    id:1,
                    title:'汽车1',
                    img:require('@/assets/img/001.jpg'),
                },
                {
                    id:2,
                    title:'汽车2',
                    img:require('@/assets/img/002.jpg'),
                },

            ]
        },
        destroyed(){
            console.log('Car组件被销毁成功了')
        }
    }
</script>

<style scoped>
     .wrap {
        width: 1100px;
        margin: 0 auto;
    }

    .wrap:after {
        content: '';
        display: block;
        clear: both;
    }
</style>

CarDetail.vue

<template>
    <div class="car-detail">
        <button @click="$router.go(-1)">返回汽车首页</button>
        <hr>
        <h1>第{{ pk }}个汽车的详情</h1>
    </div>
</template>

<script>
    export default {
        name: "CarDetail",
        data(){
            return {
                pk:0
            }
        },
        created(){
            //获取路由传递的参数
            this.pk=this.$route.query.pk || this.$route.params.pk
        }
    }
</script>

<style scoped>

</style>

CarTag.vue

<template>
    <div class="course-tag">
        <img :src="car.img" alt="" @click="goDetail(car.id)">
         <!--路由传参-->
        <router-link :to="`/car/${car.id}/detail`">{{car.title}}</router-link>
    </div>
</template>

<script>
    export default {
        name: "CarTag.vue",
        props:['car'],
        methods:{
            goDetail(pk){
                this.$router.push({
                    name:'car-detail',
                    query:{pk:pk}
                });
            }
        }
    }
</script>

<style scoped>
   .course-tag {
        width: 200px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #eee;
        float: left;
        margin: 10px;
    }

    .course-tag img {
        width: 100%;
        height: 150px;
    }

    .course-tag a {
        text-align: center;
        font-weight: normal;
        font-size: 20px;
        display: block;
    }
</style>

Nav.vue

<template>
    <div class="nav">
        <div class="content">
            <ul>
                <li class="route">
                    <router-link to="/">汽车首页</router-link>
                </li>
                <li class="route">
                    <router-link :to="{name:'car'}">汽车详情页</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
     .nav {
        width: 100%;
        height: 60px;
        background-color: #eee;
    }
    .content {
        width: 1200px;
        margin: 0 auto;
        /*background-color: red;*/
        height: 60px;
    }
    .content ul li {
        float: left;
    }
    .logo {
        padding-top: 10px;
        padding-right: 50px;
        cursor: pointer;
    }

    .route {
        padding: 15px 10px 0;
    }
    .route a {
        padding-bottom: 5px;
        border-bottom: 3px solid transparent;
    }
    .route a.router-link-exact-active {
        color: orange;
        border-bottom-color: orange;
    }
</style>