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

    vue-router的使用

    安装

    npm install vue-router --save-dev
    

    两个自定义组件

    Main.vue

    <template>
        <h1>首页</h1>
    </template>
    
    <script>
      export default {
        name: "Main"
      }
    </script>
    
    <style scoped>
    
    </style>
    

    Content.vue

    <template>
      <h1>内容</h1>
    </template>
    
    <script>
      export default {
        name: "Content"
      }
    </script>
    
    <style scoped>
    
    </style>
    

    新建router文件夹专门存放路由

    index.js

    import Vue from 'vue'
    import Router from 'vue-router'// 导入路由插件
    import Content from '../components/Content'// 导入自定义的组件
    import Main from '../components/Main'// 导入自定义的组件
    
    //使用路由
    Vue.use(Router);
    //配置导出路由
    export default new Router({
      routes: [
        {
          //路由路径
          path: '/content',
          name: 'Content',
          //跳转的组件
          component: Content
        },
        {
          //路由路径
          path: '/main',
          name: 'Main',
          //跳转的组件
          component: Main
        }
      ]
    });
    

    在main.js中配置路由

    import Vue from 'vue'
    import App from './App'
    import router from './router' //会自动扫描路由配置
    
    Vue.config.productionTip = false
    
    new Vue({
      el: '#app',
      router,  //配置路由
      components: { App },
      template: '<App/>'
    })
    

    在app.vue中使用路由

    <template>
      <div id="app">
    
        <!--相当于a标签-->
        <router-link to="/main">首页</router-link>
        <router-link to="/content">内容页</router-link>
        <!--展示模板-->
        <router-view></router-view>
    
      </div>
    </template>
    
    <script>
      import Content from './components/Content'
    
      export default {
        name: 'App',
        components: {
          Content
        }
      }
    </script>
    
  • 相关阅读:
    vim操作指南
    Linux的常用命令
    Maven的标准settings.xml文件
    常用的Docker镜像及处理命令
    Java新特性 5、6、7、8、9、10、11、12、13
    数据库的元数据抽取SQL
    元类metaclass
    MySQL视图,函数,触发器,存储过程
    ajax与后台交互案例
    python数据类型小测试
  • 原文地址:https://www.cnblogs.com/pinked/p/12325087.html
Copyright © 2011-2022 走看看