Vue中动态路由传参方法-Vue-前端日记簿

首页 Vue 正文

Vue中动态路由传参方法

2023-09-24 82

一.通过$route.params的路径方式

var User = { template:"<div>用户：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
    ]
})

二·.通过props来传参

重点：在使用props传值时必须在路由中添加props为true 不然无法在传参的过程中依然通过路径中添加数据来进行传递

显示方式从$route.params.id变成id直接显示

var User = { 
    props:["id"],
    template:"<div>用户：{{id}}</div>"
}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:id", component: User,props:true },
    ]
})

三.通过以props设置为对象的方式来进行传参、

在路由规则中使用props:(route)=>({})的方式书写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登录</router-link>
      <router-link to="/user">用户</router-link>
      <router-view></router-view>
    </div>
    <template id="login">
      <div>
        <h1>登录组件</h1>
      </div>
    </template>
    <template id="user">
      <div>
        <h1>用户组件</h1>
        <h2>用户年龄:{{age}}</h2>
        <h2>用户名:{{nicKname}}</h2>
      </div>
    </template>
  </body>
</html>
<script src="../index.vue/vue.js"></script>
<script src="../index.vue/vue-router.js"></script>
<script>
  let login = {
    template: "#login",
  };
  let user = {
    props: ["age", "nickname"],
    template: "#user",
  };
  let myRouter = new VueRouter({
    routes: [
      {
        path: "/login",
        name: "login",
        component: login,
      },
      {
        path: "/user",
        name: "user",
        component: user,
        //如果props设置为true，route.params将会被设置为组件属性
        // props: true,
        props: (route) => ({
          nickname: "小马过河",
          age: 19,
        }),
        mounted() {
          console.log(this.$route);
        },
      },
    ],
  });

  const vm = new Vue({
    el: "#app",
    data() {
      return {};
    },

    router: myRouter,
    components: {
      login,
      user,
    },
  });
</script>

四.props以函数形式传参

如果在传递参数时，既想得到参数又想得到传递的数据对象可以使用此方法通过route.params.id 来接收路径中传递过来的数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <router-link to="/login">登录</router-link>
      <router-link to="/user/12">用户中心</router-link>
      <router-view></router-view>
    </div>

    <script src="../index.vue/vue.js"></script>
    <script src="../index.vue/vue-router.js"></script>
    <script>
      // 定义组件
      // 登录组件
      let login = {
        template: `
            <div>
                <h1>我是登录页面</h1>    
            </div>
            `,
      };
      // 用户中心组件
      let user = {
        props: ["nickname", "age", "id"],
        template: `
            <div>
                <h1>我是用户中心页面</h1>
                <h2>昵称是：{{nickname}}</h2>
                <h2>年龄是：{{age}}</h2>
                <h2>用户id：{{id}}</h2>
            </div>
            `,
        mounted() {
          console.log(this.$route);
        },
      };

      // 创建路由实例 并 配置路由规则
      let myvueRouter = new VueRouter({
        // 配置路由规则
        routes: [
          {
            path: "/login",
            // 命名路由: 通过name属性为路由添加一个别名
            name: "login",
            component: login,
          },
          {
            // vue-router中 动态路由如何设置？
            //通过/:参数名  的形式传递参数

            // 动态传多个参数 并且 路径的层级 多一些
            path: "/user/:id",
            // 命名路由: 通过name属性为路由添加一个别名
            name: "user",
            component: user,
            props: (route) => ({
              nickname: "小马过河",
              age: 19,
              id: route.params.id,
            }),
          },
        ],
      });

      var vm = new Vue({
        // 模板选择器
        el: "#app",
        // 数据中心
        data() {
          return {};
        },
        //通过router属性挂载路由对象
        router: myvueRouter,
        methods: {},
        components: {
          //子组件们
          login,
          user,
        },
      });
    </script>
  </body>
</html>

标签：

发表评论：取消回复

原文链接：http://1.15.94.33/?id=52

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。