Vue3 路由配置

共计3985字,阅读大约14分钟。

Vue3莫得感情的路由

就像我一样

[toc]

Router全局配置

src/router/index.js中全局配置

import { createRouter, createWebHistory } from "vue-router";
// 路由规则
const routes = [
  {
    path: "/",
    name: "主页",
    meta: ["istabbar"],
    component: () => import("../views/Home.vue"),
  },
];
//根据路由规则创建路由
const router = createRouter({
  history: createWebHistory(""),
  routes,
});
export default router;

main.js中添加到Vue对象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
// 创建VUE对象
createApp(App)
  .use(router) // 使用.use(router)添加路由router
  .mount("#app");

Router获取及使用

<template>
  <div class="page">
    因为在setup内部没有this访问权限,不能直接使用this访问this.$router 或者
    this.$route。所有使用useRouter, useRoute来获取
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    // 第一种方法:获取路由对象 router 的方法1
    const vue = getCurrentInstance();
    const router1 = vue.ctx.$router;
    // 第二种方法:获取路由对象 router 的方法2
    const router2 = useRouter();
      
    // 下面提供了router对应的方法使用大全
    // ------------------------------------------------------
    // router1.addRoute(parentOrRoute, route)
    // router1.afterEach(回调函数)
    // router1.back() 等价于 go(-1)
    // router1.beforeEach(回调函数)
    // router1.beforeResolve(回调函数)
    // router1.currentRoute 获取当前路由:如: {_rawValue: {…}, _shallow: true, __v_isRef: true, _value: {…}}
    // router1.forward() 等价于 go(1)
    // router1.getRoutes: ƒ getRoutes()
    // router1.go(delta) 等价于 routerHistory.go(delta) 跳到指定历史记录
    // router1.hasRoute(name) 判断是否有对应的路由
    // router1.isReady() 判断路由是否准备跳转
    // router1.onError(回调函数) 当发生错误的时候执行的
    // router1.options 获取所有路由信息 {history: {…}, routes: Array(5)}
    // router1.push(to) 跳转到指定路由对应的页面,有历史记录
    // router1.removeRoute(name) 动态的删除某个路由
    // router1.replace(to) 直接跳转到指定路由页面,没有历史记录
    // router1.resolve(rawLocation, currentLocation)  可以自定义跳转参数的方法
    return {};
  },
  mounted() {
    // 第三种方法:获取路由对象 router 的方法3
    console.log(this.$router);
  },
};
</script>

Store全局配置

src/store/index.js中全局配置

import { createStore } from "vuex";
//创建存储对象
export default createStore({
  // 需要存储的值都放在这里面
  state() {
    return {
      count: 0,	// 在视图中通过$store.state.count来获取
    };
  },
  // 在其他视图中通过 $store.commit('setState', 10) 使用,用于修改stor存的值
  mutations: {
    setState(state, count) {	// 只能接受两个参数,用于修改store存的值
      state.count = count;
    },
  },
  // 相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
  // 异步任务 不会改变state 通过 $store.dispath('doubleCount') 使用
  actions: {
    doubleCount(context) {
      context.commit("doubleCount");
    },
  },
  // store的下级store 方便大型项目复杂数据管理,这里面相当于可以在放置一个和外面这些一样的模块
  modules: {},
});

main.js中添加到Vue对象

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 添加路由router引入
import store from "./store"; // 添加全局存储vuex引入
// 创建VUE对象
createApp(App)
  .use(router) // 使用.use(router)添加路由router
  .use(store) // 使用.use(store)添加全局存储vuex
  .mount("#app");

Store获取及使用

<template>
  <div class="page">
    因为在setup内部没有this访问权限,不能直接使用this访问this.$router 或者
    this.$route。所有使用useRouter, useRoute来获取
  </div>
</template>
<script>
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 第一种方法:获取路由对象 router 的方法1
    const vue = getCurrentInstance();
    const store1 = vue.ctx.$store;
    console.log(store1);
    // 第二种方法:获取路由对象 router 的方法2
    const store2 = useStore();
    console.log(store2);

    // 下面提供了:store 对应的属性使用大全
    // ------------------------------------------------------
    // commit(type, payload, options2) 在其他视图中使用mutations中定义的方法
    // dispatch(type, payload) 异步任务 不会改变state 在其他视图中使用actions中定义的方法
    // getters: {}  相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值
    // state: (...)  store中存储的值,就是通过这个在视图中获取store存储的值
    return {};
  },
  mounted() {
    // 第三种方法:获取路由对象 store的方法3
    console.log(this.$store);
  },
};
</script>
温馨提示:本文最后更新于2022-06-12 12:23:31,某些文章具有时效性,若有错误或已失效,请在下方留言或联系雅舍站长
© 版权声明
THE END
有所帮助就支持一下吧
点赞0当赏 分享
箴言区 抢沙发
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片