zoukankan      html  css  js  c++  java
  • vue-router 的使用。

    src outerindex.js

    // 配置路由相关信息
    import VueRouter from 'vue-router'
    import Vue from 'vue'
    import Home  from "../components/Home"
    import About from "../components/About"
    import User from "../components/User";
    
    
    // 1 通过vue.use(插件) 安装插件
    Vue.use(VueRouter)
    
    // 2 创建VueRouter对象
    const routes = [
      {
        path: '/',
        redirect:'home'
      },
      {
        path:'/home',
        component:Home
      },
      {
        path:'/about',
        component:About
      },
      {
        path:'/user/:userId/:abc',
        component:User
      }
    ]
    const router = new VueRouter({
      //routes 不是routers
      routes,
      mode:'history'
    })
    
    // 3 将router对象传入到vue实例中
    export default router
    View Code

    srcApp.vue

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-link to="/home" tag="button" replace >首页</router-link>
        <router-link to="/about" replace>关于</router-link>
        <router-link v-bind:to="'/user/'+userid+'/'+abc" >我的</router-link>
        {{userId}}
        {{$route.params.abc}}
    
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      data(){
        return{
          userid:'张三',
          abc:'傻叉'
        }
      },
      computed:{
        userId(){
          return this.$route.params.userId
        }
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
      .router-link-active{
        color: #42b983;
      }
    </style>
    View Code

    srcmain.js

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    View Code

    效果

  • 相关阅读:
    使用性能监视器找出SQLServer硬件瓶颈
    重启sql server 服务
    优化SQL Server数据库查询方法
    tempdb对SQL Server数据库性能有何影响
    利用动态管理视图提高SQL Server索引效率
    SQL Server 2008 R2数据库镜像部署
    优化数据库的注意事项
    查看 SQL Server 2000 中数据表所占用的磁盘空间
    SQL Server 2005 排查I/O瓶颈
    SQL语句优化的原则
  • 原文地址:https://www.cnblogs.com/polax/p/13097025.html
Copyright © 2011-2022 走看看