Blogger Information
Blog 48
fans 3
comment 1
visits 30346
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Vue 路由配置及组合Api
吴长清
Original
762 people have browsed it

一、路由介绍

Vue 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue 可以实现多视图的单页 Web 应用(single page web application,SPA)。

二、路由操作

1.路由配置

  • main.js
  1. // 引入vue模块
  2. import { createApp } from 'vue'
  3. // 引入app.vue入口文件
  4. import App from './App.vue'
  5. // 引人store模块
  6. import store from './store'
  7. // 引入路由
  8. import router from './router'
  9. // 创建App实例并将路由模块及其他模块挂载到'#app'
  10. // 这里的#app 是public\index.html文件中 <div id="app"></div> 的id
  11. createApp(App).use(store).use(router).mount('#app')
  • router/index.js
  1. // 引入路由模块 createRouter 创建路由
  2. // 路由模式: 1.默认的 createWebHistory 2.哈希(hash)模式 createWebHashHistory 在url默认加上'#'符号
  3. import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
  4. // 引入方式1:页面路径
  5. import Index from "../views/Index.vue";
  6. import List from "../views/List.vue";
  7. import My from "../views/My.vue";
  8. // 声明路由变量
  9. // path 是url路径,域名后面的路径,不能重复
  10. // name 页面起个名字,通过名字可以找到对应的组件,不能重名
  11. // component 页面(组件)路径,2种引入方式
  12. const routes = [
  13. {
  14. path: "/",
  15. name: "index",
  16. // 在上面已经引入 这里直接使用
  17. component: Index,
  18. // 配置子路由
  19. children: [
  20. {
  21. path: "ch1",
  22. name: "ch1",
  23. // 引入方式2:页面路径
  24. component: () => import("../views/Index/Ch1.vue"),
  25. },
  26. {
  27. path: "ch2",
  28. name: "ch2",
  29. component: () => import("../views/Index/Ch2.vue"),
  30. },
  31. ]
  32. },
  33. {
  34. path: "/list",
  35. name: "list",
  36. component: List,
  37. },
  38. {
  39. path: "/my",
  40. name: "my",
  41. component: My,
  42. },
  43. ];
  44. // 创建路由
  45. const router = createRouter({
  46. // 路由模式 createWebHistory 和 createWebHashHistory
  47. history: createWebHashHistory(process.env.BASE_URL),
  48. // 路由变量
  49. routes,
  50. });
  51. // export default 输出(暴露) router 变量,谁引用这个文件,就使用这个变量
  52. export default router;
  • 页面

  1. # 1.App.vue 入口文件
  2. <template>
  3. <nav>
  4. <!-- 路由链接 -->
  5. <router-link to="/">首页</router-link> |
  6. <router-link to="/list">列表</router-link> |
  7. <router-link to="/my">个人中心</router-link>
  8. </nav>
  9. <!-- 路由视图 -->
  10. <router-view/>
  11. </template>
  12. <style lang="scss">
  13. nav{
  14. padding: 20px;
  15. // 当前路由导航(选中状态)字体颜色为绿色
  16. .router-link-exact-active {
  17. color: #42b983;
  18. }
  19. }
  20. </style>
  21. # 2.Index.vue 首页页面
  22. <template>
  23. <div>
  24. <h1>{{ index }}</h1>
  25. <div class="menu">
  26. <!-- 子路由 -->
  27. <ul>
  28. <li>
  29. <router-link to="/ch1">子路由1</router-link>
  30. </li>
  31. <li>
  32. <router-link to="/ch2">子路由2</router-link>
  33. </li>
  34. </ul>
  35. </div>
  36. <div class="main">
  37. <router-view />
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. index: "这是首页",
  46. };
  47. },
  48. };
  49. </script>
  50. <style lang="scss">
  51. .menu {
  52. width: 30%;
  53. height: 50px;
  54. }
  55. .main {
  56. width: 65%;
  57. height: 300px;
  58. background: #42b983;
  59. }
  60. a {
  61. font-weight: bold;
  62. color: #2c3e50;
  63. }
  64. .router-link-exact-active {
  65. color: #42b983;
  66. }
  67. </style>
  68. # 2.1 Ch1.vue 子路由文件1
  69. <template>
  70. <div>
  71. <div>{{ch1}}</div>
  72. </div>
  73. </template>
  74. <script>
  75. export default {
  76. data() {
  77. return {
  78. ch1:"子路由一的页面"
  79. }
  80. },
  81. };
  82. </script>
  83. # 2.2 Ch1.vue 子路由文件2
  84. <template>
  85. <div>
  86. <div>{{ch2}}</div>
  87. </div>
  88. </template>
  89. <script>
  90. export default {
  91. data() {
  92. return {
  93. ch2:"子路由二的页面"
  94. }
  95. },
  96. };
  97. </script>
  98. # 3.list.vue 列表页面
  99. <template>
  100. <h1>{{msg}}</h1>
  101. </template>
  102. <script>
  103. export default {
  104. data() {
  105. return {
  106. msg:"这是列表页面"
  107. }
  108. },
  109. };
  110. </script>
  111. # 4.my.vue 个人中心页面
  112. <template>
  113. <h1>{{my}}</h1>
  114. </template>
  115. <script>
  116. export default {
  117. data() {
  118. return {
  119. my:"这是个人中心页面"
  120. }
  121. },
  122. };
  123. </script>

2.导航守卫

2.1 全局路由导航守卫

  1. // 1.配置全局路由导航守卫
  2. // 1.1 前置钩子: 全局导航(打开 route/index.js 文件)
  3. router.beforeEach((to, from) => {
  4. // from 离开路由,to 到达路由,vue路由3.x 有个next参数
  5. console.log(to);
  6. console.log(from);
  7. // 把路由名称 赋值给网页顶部,
  8. document.title = to.name;
  9. });
  10. // 2.1 后置钩子:全局导航(打开 route/index.js 文件)
  11. router.afterEach((to, from) => {
  12. // from 离开路由,to 到达路由
  13. console.log(to);
  14. console.log(from);
  15. });

2.2 局部路由导航守卫

  1. // 在 route/index.js 中路由变量 router 中进行配置
  2. {
  3. path: "/my",
  4. name: "my",
  5. component: My,
  6. // 前置钩子
  7. beforeEach: (to, from) => {
  8. // from 离开路由,to 到达路由
  9. console.log(to);
  10. console.log(from);
  11. },
  12. }

更多:http://www.ouyangke.com/front/vue3/4Vue3%E8%B7%AF%E7%94%B1.html

三、组合API

setup() 函数是vue3中专门新增的方法,可以理解为 Composition Api 的入口

  1. <template>
  2. <div>
  3. <div>{{ ch1 }}</div>
  4. <div>
  5. <div>{{ data.number }}</div>
  6. <!-- 使用 reactive 方法创建的数据,就能相应了 -->
  7. <button @click="data.number++">加++</button>
  8. <!-- 执行方法 -->
  9. <button @click="jian()">减++</button>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. // 引入 reactive 方法
  15. import { reactive } from "vue";
  16. export default {
  17. data() {
  18. return {
  19. ch1: "子路由一的页面",
  20. };
  21. },
  22. setup() {
  23. // 用reactive方法,创建数据
  24. const data = reactive({
  25. number : 10
  26. })
  27. // 创建方法
  28. const jian = () => {
  29. data.number--;
  30. }
  31. // 数据和函数都需要返回(暴露)出去
  32. return {
  33. data,
  34. jian
  35. }
  36. }
  37. };
  38. </script>

更多详解:http://www.ouyangke.com/front/vue3/5Vue3%E7%BB%84%E5%90%88API.html

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post