zoukankan      html  css  js  c++  java
  • Vue组件显示与页面跳转

    最近在学习vue框架,从网上找了一个实例但是只有一个页面,就是所有组件都放到App.vue里,结果点击按钮,所有内容都显示在当前页面,但是我想实现页面的跳转,搞了好几天,终于在网上找到了一个例子。下面贴出在一个页面添加组件以及跳转页面的代码。

    单页应用(SPA),那么整个项目有以下三个文件是必要的:

    • 一个html文件:index.html
    • 一个webpack打包时的入口js文件:main.js
    • 一个根vue组件,作为其他组件的挂载点:app.vue    (作为首页)

    1、实现页面的跳转:

     1、首先在conponent文件夹中创建index.vue和hello.vue文件

                       

    2、修改main.js文件

    3、修改App.vue

    4、修改index.html

    这样就会把渲染出来的页面挂载到这个id为app的div里了。

    2、在页面中添加组件

    如果我在App.vue里添加组件login.vue,然后配置路由main.js

              

     

    运行结果如下:

    但是如果我想把这个组件放到hello.vue组件里按照该方法就不对了,不知道为什么。

    这个错误的意思貌似是找不到路径,

    后来解决了这个问题,方法是对的,但是路径需要改一下。        import login from '../components/login.vue';(有两个点)

     注:对于路径的写法: ./ 当前目录 ../ 父级目录 / 根目录

  • 相关阅读:
    关联接口,依赖接口的用法
    通过requests发送不同请求格式的数据
    requests请求数据参数化配置
    requests模块中通用的请求方法,即requests.request
    预期方向需要动态调整
    红枣大幅低开高开
    大涨大跌判断风向
    开盘大幅拉升回落
    红枣变盘之前的预测
    开盘情况要稳定才能进,不看看一根线
  • 原文地址:https://www.cnblogs.com/xiaoan0705/p/8797072.html
Copyright © 2011-2022 走看看