Vue 路由

路由核心配置：

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// import 别名 from '文件'
import Home from '../views/Home'
import About from '../views/About'
import First from '../views/FirstCP'

// 路由配置
// 1）当用户在浏览器中访问的路由是 / ，router插件就会加载 Home.vue文件，同理 /about 就是 About.vue文件
// 2）将加载的 Home.vue文件 或者 About.vue文件，去替换App.vue文件中的 <router-view />占位符
// 3）用redirect配置来实现路由的重定向
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/home',
        redirect: '/',  // 路由的重定向
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/first',
        name: 'First',
        component: First
    }
];

路由逻辑跳转

"""
1）很多时候，我们需要通过普通按钮的逻辑，或是直接在某些逻辑中完成页面的跳转
2）可以通过在逻辑中用 this.$router.push() 来完成前往目标页，两种语法如下
    this.$router.push('路径')
    this.$router.push({name: '路由名'})
3）在做移动端项目时，没有像浏览器那样的前进后台键，页可以用 this.$router.go() 来完成前进后退，语法如下
    前进后退：this.$router.go(正负整数)，正式代表前进，负数代表后退，数值就是步长
"""

 案例：

<template>
    <div class="home">
        <Nav/>
        <h1>主页</h1>
        <button @click="goPage('/first')">前往第一页</button>
        |
        <button @click="goPage('/second')">前往第二页</button>
        |
        <button @click="goBack(-1)">后退一页</button>
        |
        <button @click="goBack(-2)">后退二页</button>
        |
        <button @click="goBack(1)">前进一页</button>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'

    export default {
        methods: {
            goPage(path) {
                // 可以通过 this.$router 完成逻辑跳转
                this.$router.push();
            },
            goBack(num) {
                // 一般在移动端项目上运用
                this.$router.go(num);  
            }
        },
        components: {
            Nav,
        }
    }
</script>

 路由传参

第一种方式：通过url正则传递数据
i）设置
    路由: path: '/goods/detail/:pk'   |   '/goods/:pk/detail/:xyz'
    请求: '/goods/detail/任意字符'    |    '/goods/任意字符/detail/任意字符'
ii）如何传
    标签跳转：<router-link :to="`/goods/detail/${pk}`"></router-link>
    逻辑跳转：this.$router.push(`/goods/detail/${pk}`)

iii）如何取
    this.$route对象是管理路由参数的，传递的参数会在this.$route.params字典中
    this.$route.params.pk


第二种方式：通过url参数传递数据
i）设置
    路由: path: '/goods/detail'
    请求: '/goods/detail?pk=数据'
ii）如何传
    <router-link :to="`/goods/detail?pk=${pk}`"></router-link>
    <router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>

    this.$router.push(`/goods/detail?pk=${pk}`)
    this.$router.push({name:'GoodsDetail', query:{pk: pk}})

iii）如何取
    this.$route对象是管理路由参数的,传递的参数会在this.$route.query字典中
    this.$route.query.pk

第一种传参方式

<template>
    <div class="goods">
        <Nav />
        <h1>商品页</h1>
        <hr>
        <h2 style="text-align: center">{{ goodsTitle }}商品被选中</h2>
        <div class="main">
            <GoodsBox v-for="goods in goods_list" :goods="goods" @receiveData="recFn"/>

        </div>
    </div>
</template>

<script>
    import GoodsBox from "../components/GoodsBox";
    import Nav from "../components/Nav";

    let goods_list = [
        {
            pk:1,
            img: require('../assets/img/001.jpg'),
            title:'奔驰'
        },
        {
            pk:2,
            img:require('../assets/img/002.jpg'),
            title:'宝马'
        },
        {
            pk:3,
            img:require('../assets/img/003.jpg'),
            title:'奥迪'
        },
        {
            pk:4,
            img:require('../assets/img/004.jpg'),
            title:'法拉利'
        }
    ];
    export default {
        name: "Goods",
        data() {
            return{
                goods_list,
                goodsTitle:'哪个',
            }
        },
        methods:{
            recFn(title){
                console.log('接收到了'+title);
                this.goodsTitle = title
            }
        },
        components: {
            GoodsBox,
            Nav
        }
    }
</script>

<style scoped>

</style>

配置：router/index.js

const routes = [
    {
        path: '/goods/detail/:pk',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

传递：GoodsBox.vue  (商品盒子)

<template>
    <router-link class="goods-box" :to="`/goods/detail/${goods.pk}`">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </router-link>

    <!------------------- 或者 ------------------->

    <div class="goods-box" @click="goDetail(goods.pk)">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                this.$router.push(`/goods/detail/${pk}`);
            }
        }
    }
</script>

接收：GoodsDetail.py（商品详情页）

<template>
    <div class="goods-detail">
        <h1>商品详情页:第{{ pk }}个商品</h1>
        <hr>
    </div>
</template>

<script>
    export default {
        name: "GoodsDetail",
        data() {
            return {
                pk:'未知',
            }
        },
        // 通常都是在钩子中获取路由传递的参数
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk
        }
    }
</script>

第二种传参方式

配置：router/index.js

const routes = [
    {
        path: '/goods/detail',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

传递：GoodsBox.vue  (商品盒子)

<template>
    <router-link class="goods-box" :to="`/goods/detail?pk=${goods.pk}`">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </router-link>

    <!------------------- 或者 ------------------->

    <div class="goods-box" @click="goDetail(goods.pk)">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                // this.$router.push(`/goods/detail?pk=${goods.pk}`);
                
                // 或者
                this.$router.push({
                    name: 'GoodsDetail',
                    query: {
                        pk,
                    }
                });
            }
        }
    }
</script>

接收：GoodsDetail.py（商品详情页）

<template>
    <div class="goods-detail">
        <h1>商品详情页:第{{ pk }}个商品</h1>
        <hr>
    </div>
</template>

<script>
    export default {
        name: "GoodsDetail",
        data() {
            return {
                pk:'未知',
            }
        },
        // 通常都是在钩子中获取路由传递的参数
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk
        }
    }
</script>