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

    首先安装vue-router,使用npm install vue-router --save,添加成功后在package.json 文件中可以看到引入的信息

    先在 components文件下创建一个index,vue 

    配置路由内容,在src文件下创建router文件夹以及里面的index.js文件

    import Vue from 'vue' // 引入vue
    import Router from 'vue-router' // 引入vue-router
    
    Vue.use(Router) // 使用路由组件
    
    // 实例化路由并导出,也可以将实例化路由与导出分开写,根据个人习惯
    /*
    * let router = new Router({})
    * export default router
    * */
    export default new Router({
      mode: 'history', // 路由模式,分为hash,history两种,最明显的区别hash url带# http://localhost:8080/#/ history不带# http://localhost:8080/
      routes: [
        {
          path: '/', // url的路径
          name: 'home', // 路由的名称
          component: () => import('../components')
          /*
          * 推荐写法() => import() 路由懒加载,处理页面首次打开等待时间长的问题
          * '../components' 等同于 '../components/index.vue',引入页面为index的情况下,可以省略不写,非index文件,后面的.vue也可以省略
          * 项目不大的情况下使用以下方法也没啥问题
          * import home from '../components'
          * component: home
          * */
        }
      ]
    })

    配置完毕router文件后,去main.js中将路由注册进去

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    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, // 注册路由
      components: { App },
      template: '<App/>'
    })

    重要的一步,在根目录下App.vue文件中配置路由的显示

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    </style>

    这样就可以在页面中正常显示了

     嵌套路由-子路由children使用

    然后在home这个父页面中添加子路由的显示,

    页面效果

  • 相关阅读:
    C盘扩容 无损分区 (摘录自百度经验)
    Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据
    手机访问PC站时自动跳转到手机站
    C# String 前面不足位数补零的方法
    把页面翻译成繁体
    网页上传视频.MP4视频编码、音频编码配置
    同样的mp4文件,本地测试可以播放,浏览服务器页面时不能播放
    vue $refs给for循环出来的某一个添加样式
    vue 获取验证码倒计时
    判断两个数组的内容是否相同
  • 原文地址:https://www.cnblogs.com/nixu/p/15003143.html
Copyright © 2011-2022 走看看