Vue 路由
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>
const routes = [
{
path: '/goods/detail/:pk',
name: 'GoodsDetail',
component: GoodsDetail
},
]
<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>
<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>
const routes = [
{
path: '/goods/detail',
name: 'GoodsDetail',
component: GoodsDetail
},
]
<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>
<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>
