vue学习笔记 十四、页面跳转

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、 效果：

 

 

二、项目结构截图

 

 

三、代码

index.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router' import Home from '../views/Home.vue'   //路由的配置属组 //paht：路由路劲 必须以/开头 必填 //component：对应的路由组件 必填 //name：路由的名字 const routes = [   {     path: '/',     name: 'Home',     component: Home   },   {     path: '/about',     name: 'About',     //按需引入     //如果没有访问/about 就不会加载这个组件 节约性能     component: () => import( '../views/About.vue')   } ]   //创建路由对象 const router = createRouter({     //createWebHashHistory hash模式路径前面会多一个#号   history: createWebHistory(process.env.BASE_URL),   routes })   export default router

 

About.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<template>   <div class="about">     <h1>这是about page</h1>     <button @click="back">回到首页</button>   </div> </template>     <script> import {defineComponent} from 'vue' import {useRouter} from 'vue-router'    export default defineComponent({     name :'About',     setup(){       let router = useRouter()       let back = ()=>{           //都是返回上一步            router.back()           //router.go(-1)       }       return {           back       }     } })                    </script>

 

Home.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

<template>     <div>      <button @click="goto">跳转路由</button>     </div>        </template>   <script>    import {defineComponent,computed,ref } from 'vue' import {useStore} from 'vuex' import {useRouter,useRoute} from 'vue-router'     export default defineComponent({     name:'Home',     components:{            },     setup(){         //router 是全局路由对象         let router = useRouter()         console.log(router)                                                   let goto = ()=> {             //跳转路由             //push函数里面可以直接传入跳转的路径             //back:上一页             //forward:下一页             //go(整数) 整数代表前进 负数代表后退                           //router.push('/about')             router.push({path : '/about'})                       }         return{               goto                         }     } })             </script>   <style scoped lang="scss"> </style>