zoukankan      html  css  js  c++  java
  • vue router动态路由

    动态id

    index.js

    export default new Router({
      routes: [{
          path: '/Furong/:id',
          name: 'Furong',
          component: Furong
        },
    })
    

    App.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-link :to="'/Furong/' + id" replace="">Furong</router-link>
        <router-view />
      </div>
    </template>
    
    <script>
      export default {
        name: 'App',
        data() {
          return {
            id: '123',
          }
        }
      }
    </script>
    
    <style>
    </style>
    

    Furong.vue

    <template>
      <div id="Furong">
        <p>{{msg}}</p>
        <p>{{userId}}</p>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Furong',
        data() {
          return {
            msg: 'hello furong!'
          }
        },
        computed: {
          userId() {
            return this.$route.params.id;
          }
        }
      }
    </script>
    
    <style>
      #Furong {
        color: green;
      }
    </style>
    

  • 相关阅读:
    做汉堡(续)
    做汉堡
    <构建之法>3-5章感想
    《构建之法》1-2章感想
    四则运算界面练习
    快速排序
    冒泡算法(思路1)
    希尔排序
    KMP算法
    1、基础算法题
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/14986285.html
Copyright © 2011-2022 走看看