VUE3----Vue Router 4.x 编程式导航

main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from "@/store";
import router from "@/router";

const app=createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

router/index.js

meta：路由元信息
通过meta对象中的一些属性来判断当前路由是否需要进一步处理，如果需要处理，按照自己想要的效果进行处理即可

import {createRouter, createWebHashHistory} from "vue-router";

const routes=[
    {
        path:'/home',
        component:()=>import('@/pages/home'),
        meta:{
            isAuth:true,
            title:'首页'
        },
    },
    {
        path: '/about',
        component:()=>import('@/pages/about'),
        meta:{
            isAuth:true,
            title:'关于'
        },
        children:[
            {
                path: 'mine',
                component:()=>import('@/pages/mine')
            },
        ]
    },
    {
        path: '/query',
        component:()=>import('@/pages/query')
    },
    {
        path: '/params/:id/:title/:content',
        name:'params',
        component:()=>import('@/pages/params')
    },
    {
        path: '/props/:id/:title/:content',//params方式
        // path: '/props',//query方式
        name:'props',
        component:()=>import('@/pages/props'),
        // props的第一种写法，值为对象,该对象中的所有Key-value都会以props的形式传递给Dateil组件
        // props:{a:1,b:'hello'}

        // props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
        // props:true

        // props的第三种写法,值为函数==>params方式
        props({params:{id,title,content}}){
            return {id,title,content}
        }
        // props的第三种写法,值为函数==>query方式
        // props({query:{id,title,content}}){
        //     return {id,title,content}
        // }
    },
    {
        path: '/:pathMatch(.*)*',
        redirect:'/home'
    }
]
const router=createRouter({
    history:createWebHashHistory(),
    routes
})
export default router

发送参数 home.vue

• useRouter() —— 返回 router 实例
• useRoute() —— 返回当前路由地址

通过 query 传参

<template>
  <div>
    <button @click="toQuery">通过query传递参数并跳转</button>
  </div>
</template>

<script>
import {reactive} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "index",
  setup() {
    const message = reactive({id: '001', title: '消息001', content: '锄禾日当午'})
    const router=useRouter()
    const toQuery = () => {
      // router.push({path:'/query',query:message})
      router.replace({path:'/query',query:message})
    }
    return {
      message,
      toQuery
    }
  }
}
</script>

通过 params 传参

注意，如果提供了 path，params 会被忽略：
params 不能与 path 一起使用

---

<template>
  <div>
    <button @click="toParams">通过params传递参数并跳转</button>
  </div>
</template>

<script>
import {reactive} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "index",
  setup() {
    const message = reactive({id: '001', title: '消息001', content: '锄禾日当午'})
    const router=useRouter()
    const toParams = () => {
      // router.push({path:`/params/${message.id}/${message.title}/${message.content}`})
      // router.replace({path:`/params/${message.id}/${message.title}/${message.content}`})

      // router.push({name:'params',params:message})
      router.replace({name:'params',params:message})
    }
    return {
      message,
      toParams
    }
  }
}
</script>

通过 props 传参

<template>
  <div>
    <button @click="toPropsOnParams">通过props传递参数并跳转==>params方式</button>
    <button @click="toPropsOnQuery">通过props传递参数并跳转==>query方式</button>
  </div>
</template>

<script>
import {reactive} from "vue";
import {useRouter} from "vue-router";

export default {
  name: "index",
  setup() {
    const message = reactive({id: '001', title: '消息001', content: '锄禾日当午'})
    const router=useRouter()
    const toPropsOnParams = () => {
      // router.push({path:`/props/${message.id}/${message.title}/${message.content}`})
      // router.replace({path:`/props/${message.id}/${message.title}/${message.content}`})

      // router.push({name:'props',params:message})
      router.replace({name:'props',params:message})
    }
    const toPropsOnQuery = () => {
      // router.push({path:'/props',query:message})
      router.replace({path:'/props',query:message})
    }
    return {
      message,
      toPropsOnParams,
      toPropsOnQuery
    }
  }
}
</script>

接收参数

• useRouter() —— 返回 router 实例
• useRoute() —— 返回当前路由地址

query 接收 query.vue

<template>
  <div>
    <h2>query参数展示</h2>
    <h3>{{message.id}}==>{{message.title}}==>{{message.content}}</h3>
  </div>
</template>

<script>
import {useRoute} from "vue-router";
import {reactive} from "vue";

export default {
  name: "index",
  setup(){
    const route=useRoute()
    const message=reactive(route.query)
    return{
      message
    }
  }
}
</script>

params 接收 params.vue

<template>
  <div>
    <h2>params参数展示</h2>
    <h3>{{message.id}}==>{{message.title}}==>{{message.content}}</h3>
  </div>
</template>

<script>
import {useRoute} from "vue-router";
import {reactive} from "vue";

export default {
  name: "index",
  setup(){
    const route=useRoute()
    console.log('route.params====',route.params)
    const message=reactive(route.params)
    return{
      message
    }
  }
}
</script>

props 接收 props.vue

<template>
  <div>
    <h2>props参数展示</h2>
    <h3>{{id}}==>{{title}}==>{{content}}</h3>
  </div>
</template>

<script>
export default {
  name: "index",
  props:['id','title','content'],
  setup(props){
    console.log('props====',props)
  }
}
</script>