vue3动态路由添加，列表获取，跳转，传参，获取元素宽高等等

vue3动态路由添加，列表获取，跳转，传参，router里获取store里的值以及使用方法，页面获取vuex里的state值，ref获取元素宽高，监听vuex里的值
vue3动态路由添加和路由列表获取

import {useRouter} from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter(); 
    const dui = [
      {
        path: '/aaa',
        name: 'Aaa',
        component:  () => import('@/views/aaa.vue')
      },
      {
        path: '/firs',
        name: 'Firs',
        component:  () => import('@/views/firs.vue')
      },
      {
        path: '/thre',
        name: 'Thre',
        component:  () => import('@/views/thre.vue')
      },
    ];
    //添加路由
    dui.forEach(res =>{
      router.addRoute(res);
    })
    //获取路由列表
    let lis = router.getRoutes();
  },
})

vue3路由跳转传参

方法一

import router from './router'

  setup() {
  	//点击跳转
    const gorouter = () =>{
      const obj = {
        name:'nihao',
        age:100
      }
      router.push({
        path:'/about',
        query:obj
      });
    }
    return {
      gorouter
    }
  },

方法二

import { useRoute, useRouter} from 'vue-router'

setup() {
    const router = useRouter();
    const route = useRoute();

    const gorouter = () =>{
      const obj = {
        name:'nihao',
        age:100
      }
      router.push({
        path:'/about',
        query:obj
      });
    }
    return {
      gorouter
    }
  },

router里获取store里的值以及使用里面的方法
在router里引入store里的文件就可以拿到
例如：获取store下的modules下的文件里的值

//router文件里
import use from '../store'
import store from '../store/modules/setUserInfo'
let name = store.state.name;
use.commit('方法',值)

页面获取vuex里state的某个值(用computed才能实时同步更新)

import { computed, defineComponent,toRaw } from 'vue'
import {useStore} from 'vuex'

setUp(){
	 const store = useStore();
    //获取vuex中setUserInfo模块里state的routerList值
    //如果不是模块化就把setUserInfo去掉就行
    //用computed才能实时同步更新
    let storeData = computed(() =>{
      return store.state.setUserInfo.routerList
    }).value
    
    //得到的是一个proxy值，需要toRaw才能拿到你想要的
    console.log(toRaw(storeData ))//方法一
    console.log(toRaw(store.state.setUserInfo.routerList))//方法二
}

ref获取元素及宽高

<div ref="bigscroll"></div>
setup() {
	const bigscroll = ref(null);
	onMounted(() =>{
		console.log(bigscroll.value)
		console.log(bigscroll.value.offsetWidth)
		console.log(bigscroll.value.clientWidth)
		console.log(bigscroll.value.clientHeight)
	})
	return{
		bigscroll
	}
}

监听vuex里的值

import {useStore} from 'vuex'
setup() {
        const store = useStore();
		watch(()=>store.state.defaultActive,()=>{
		    console.log('??????????')
		})
}