Vue3.x动态路由、命名路由和编程式导航

1.动态路由的定义和使用

两种方法 ：

        1.路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名（path: 'apple/:mid'），通过{{ $route.params.mid }}进行接收

        2.声明属性props:true，选项，以props的形式接收动态路由中的参数

{
      path: '/fruit',
      component: MyFruit,
      //子路由重定向
      redirect: '/fruit/apple/:mid',
      //声明props:true，选项，以props的形式接收动态路由中的参数
      props: true,
      children: [
        //路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名
        { path: 'apple/:mid', component: MyApple, props: true },
        { path: 'orange/:mid', component: MyOrange, props: true }
      ]
    },

<template>
  <div class="">
    <h3>水果-------{{ $route.params.mid }}</h3>
    <p>---{{ mid }}</p>
    <router-link to="/fruit/apple/1" >苹果</router-link>
    <router-link to="/fruit/orange/2" >橘子</router-link>
    <hr />
    <router-view class="fruit-router"></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'MyFruit',
  props: ["mid"]
}
</script>

2.编程式导航

        this.$router.push()  --- 通过匹配path路径进行条装

        this.$router.go(-1) --- 返回上一级

<template>
  <div class="">
    <h3>home组件</h3>
    <!-- 编程式导航的应用 -->
    <button @click="goApple">跳转到苹果页面</button>
    <button @click="goBack">回退</button>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'MyHome',
  data () {
    return {}
  },
  methods: {
    goApple () {
      //通过匹配path路径进行条装
      this.$router.push('/fruit/apple/1')
    },
    goBack () {
      //回退一个页面
      this.$router.go(-1)
    }
  },
  components: {}
}
</script>

3.命名路由

一、声明name属性，为路由进行命名

{
      path: '/fruit',
      component: MyFruit,
      //子路由重定向
      redirect: '/fruit/apple/:mid',
      //声明props:true，选项，以props的形式接收动态路由中的参数
      props: true,
      children: [
        //路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名
        //命名路由，声明name属性
        { path: 'apple/:mid', component: MyApple, props: true, name: 'apple' },
        { path: 'orange/:mid', component: MyOrange, props: true, name: 'orange' }
      ]
    },

使用命名路由进行跳转

 <!-- 通过命名路由跳转， params声明要传递的参数 -->
    <router-link :to="{ name: 'orange', params: { mid: 2 } }" @click="getRouter"
      >橘子</router-link>

二、通过编程式导航运用命名路由

goApple (id) {
  //通过命名路由进行编程式导航
  this.$router.push({ name: 'orange', params: { mid: id } })
},

最后

以上就是勤恳紫菜为你收集整理的Vue3.x动态路由、命名路由和编程式导航的全部内容，希望文章能够帮你解决Vue3.x动态路由、命名路由和编程式导航所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。