zoukankan      html  css  js  c++  java
  • 【Vue实战之路】二、路由使用基础,六步搞定Vue-router

    vue-router的出现是为了解决路由与视图(实际项目中的单文件组件)的对应关系。若单单为了实现交互时对相应组件的渲染,则通过vue的基础操作完全可以实现,那么为什么要是用vue-router呢,个人理解为以下几点,其实也就是vue-router的特点。

    1.最显著就是无需刷新页面,完成跳转。资源预加载。

    2.高效完成大型项目中多层的路由嵌套

    3.完美兼容history、hash、abstract路由模式

    4.支持重定向

    5.支持编程式操作(存在相应的实例方法对路由进行操作)

    下面接着上一篇,vue-cli部署完成后,六部完成vue-router的基础操作:

    一、安装vue-router包模块

    npm install vue-router --save

    二、引入包模块

    在需要使用vue-router的文件里引入:

    import VueRouter from 'vue-router'

    三、为Vue注册插件

    Vue.use(VueRouter)

    四、创建vue-router实例

    var router = new VueRouter({
      routes: [
            { path: '/', component: home }
    ]})

    五、注入Vue配置参数

    new Vue({
      el: '#app',
      router,  //注入vue-router
      template: '<App/>',
      components: { App }
    })

    六、添加路由组件的渲染位置

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <!-- vue-router的组件渲染位置 -->
        <router-view></router-view>
      </div>
    </template>

    以上六步为vue-router配置的基本步骤,无论逻辑多复杂,万变不离其宗。即便遇到了问题,分此六步逐一排查就一定能找到问题所在。

  • 相关阅读:
    [BZOJ2179]FFT快速傅立叶
    [UOJ#34]多项式乘法
    [BZOJ4636]蒟蒻的数列
    [BZOJ4632]树的编码
    [BZOJ1070][SCOI2007]修车
    [BZOJ1529][POI2005]ska Piggy banks
    [BZOJ2654]tree
    腾讯应用管理中心,腾讯开放平台应用认领
    Sony/索尼 NW-ZX300A ZX300 无损音乐播放器4.4口
    read progress
  • 原文地址:https://www.cnblogs.com/pomelott/p/7887679.html
Copyright © 2011-2022 走看看