vue3中 vue-router4的使用、vue3中的计算属性和监听属性

vue-router使用

1、下载vue-router依赖

yarn add vue-router

2、创建router/index.js文件

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        component: () => import("../components/A.vue")
    },
    {
        path: '/b',
        component: () => import("../components/B.vue")
    }
]

const router = createRouter({
    history: createWebHashHistory('/'),  // 设置为history模式，就是路径里面没有#,  createWebHashHistory 是默认的，括号里面的就是基础路径，可以理解为项目名称，就是请求路径的基础url
    routes
})

export default router

3、main.js文件中引入router/index.js文件

import { createApp } from 'vue'
import App from './App.vue'

import router from './router/index.js'

createApp(App).use(router).mount('#app')

路由的跳转传值

import { useRouter } from "vue-router"
const router = useRouter()

router.push({
	path: '/test',
	query: {a: 1}
})

路由接值
import { useRoute } from "vue-router"
const route = useRoute()

console.log(route.query.a)

vue3中的计算属性 computed

import { computed } from "vue"
const c1 = computed(() =>{
	return test1 + ':' + test2
})

vue3中的监听属性 watch

      1、监听字符串
      import { watch } from "vue"
      let count1 = ref(0)
      watch(count1, (val) => {}, {immediate: true})

      2、监听对象
      let obj = reactive({name: ''})
      watch(() => obj.name, (val) =>{})

      3、监听路由的变化
      import { useRouter } from "vue-router"
      const router = useRouter()
      watch(() => router.currentRoute.value, (val) => {})