Vue router实现简单的跳转

最新推荐文章于 2023-07-30 21:21:08 发布

我就是你的语法糖️

最新推荐文章于 2023-07-30 21:21:08 发布

阅读量478

点赞数 1

本文链接：https://blog.csdn.net/qq_43274430/article/details/103024619

版权

1、自己创建一个项目 https://www.jianshu.com/p/02b12c600c7b

搭建vue脚手架：https://www.jianshu.com/p/df449848e911，按照这个做npm start运行是有问题的，在package.json scripts中加入"start": "npm run dev",就可以了

2、组件深刻了解vue组件：https://segmentfault.com/a/1190000010527064?utm_source=tag-newes

3、使用vue-router页面跳转

https://blog.csdn.net/sunshao904/article/details/78829635

先安装vue-router，npm install vue-router，接着完成以下步骤

建立一个文件夹components，文件夹下面建立hello.vue和index.vue

App.vue

<template>
  <div id="app">
    hello vue!
  <h1>{{msg}}</h1>
  <ul>
    <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
    <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
  </ul>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg:"yayayayaya"
    }
  },
  methods: {
  },
}
</script>
<style>
</style>

hello.vue

<template>
 <div>
     <h2>Hello 大雄</h2>
     <hr/>
     <p>{{sContent}}</p>
 </div>
</template>
<script>
 export default{
     data(){
         return {
             sContent:"This is hello components"
         }
     }
 }
</script>

index.vue

<template>
 <div>
     <h2>Index 哆啦A梦</h2>
     <hr>
     <p>{{sContent}}</p>
 </div>
</template>
<script>
 export default{
     data(){
         return {
             sContent:"This is index components"
         }
     }
 }
</script>

Main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import index from './components/index.vue'
import hello from './components/hello.vue'
//定义路由
const routes = [
 {path:'/',component:App},
 { path: '/index', component: index },
 { path: '/hello', component: hello },
 { path: '/', redirect: '/App' }  //重定向
]
//创建 router 实例，然后传 routes 配置
const router=new VueRouter({
routes
});
//创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
  el: '#app',
  router
})

index.html（加了一句，为加红部分）<router-view></router-view><router-view></router-view><router-view></router-view>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>webpack</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

impo

结果

4、vue-router 的基本使用：

https://blog.csdn.net/weixin_41910848/article/details/81697577

5、element-ui：https://element.eleme.cn/#/zh-CN/component/quickstart

https://blog.csdn.net/boonya/article/details/84834772

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。

6、理解git 的clone pull push add commit：git分布式版本控制系统，可以有效告诉的处理项目版本管理，每个开发者可以通过克隆（git clone）提交到本地, 在本地机器上拷贝一个完整的git仓库，git add 可以将某个目录下的所有内容全都纳入内容跟踪之下，提交内容到版本库：git commit，git fetch+git merge会将远程分支下载的文件更新到工作目录里，git pull是自动合并。

（1）Git命令：https://blog.csdn.net/zixiao217/article/details/82931096

git clone远程操作的第一步，通常是从远程主机克隆一个版本库

git commit是将本地修改过的文件提交到本地库中。

git push命令用于将本地分支的更新，推送到远程主机

git pull命令的作用是，取回远程主机某个分支的更新，再与本地的指定分支合并

git add添加 git remote add命令用于添加远程主机。

注：git add之前，应该先git pull一下；git add 后面是空文件夹的话，添加不上

commit和push 的区别：https://blog.csdn.net/weixin_34375233/article/details/85799061

GIT命令 clone remote fetch pull push 的使用：https://blog.csdn.net/xiaoqiangyonghu/article/details/78645448

每人自己建立一个HelloWorld项目，练习使用git的add/commit/push/pull/fetch/clone等基本命令。比较项目的新旧版本的差别：https://www.cnblogs.com/yangyang5/p/5886428.html

（2）错误：https://www.jianshu.com/p/ceaf950a027b

（3）git 更新文件：在vscode里面git stash一下在git pull一下

（4）git 提交文件：https://www.cnblogs.com/eedc/p/6168430.html?tdsourcetag=s_pctim_aiomsg

git add .

git commit -m "提交信息"

git push -v origin master

7、vue小例子：https://www.cnblogs.com/rlann/p/7244130.html

8、vue项目如何打包：https://jingyan.baidu.com/article/22fe7cedc8503f3002617f0b.html

9、vue中npm run dev运行项目不能自动打开浏览器!：https://blog.csdn.net/bright2017/article/details/78825333

10、ES6：http://es6.ruanyifeng.com/#docs/module#export-%E5%91%BD%E4%BB%A4

11、vue实现登录界面：http://www.php.cn/js-tutorial-387646.html

12、json文件转json树（代码）：https://blog.csdn.net/qq_19872525/article/details/82823188

参考（代码解释）：https://blog.csdn.net/w1418899532/article/details/90065633

Json写为HTML界面

直接将代码复制到script中

Var children：[//存放数据]
function transDate(list,idstr,pidstr){  
    var result = [],temp = {};  
    for(i = 0; i < list.length; i++){  
        temp[list[i][idstr]]=list[i];//将nodes数组转成对象类型  
    }  
    for(j=0; j<list.length; j++){  
        tempVp = temp[list[j][pidstr]]; //获取每一个子对象的父对象  
        if(tempVp){//判断父对象是否存在，如果不存在直接将对象放到第一层  
            if(!tempVp["children"]) tempVp["children"] = [];//如果父元素的nodes对象不存在，则创建数组  
            tempVp["children"].push(list[j]);//将本对象压入父对象的nodes数组  
        }else{  
            result.push(list[j]);//将不存在父对象的对象直接放入一级目录  
        }  
    }  
    return result;  
}  
  
console.log(transDate(children,"id","parentId")); //传入的值 列表 ，本对象的id，父对象的id  
document.write(JSON.stringify(transDate(children,"id","parentId")));

13、如何在vscode中调用浏览器运行html？https://zhidao.baidu.com/question/750463631636795612.html

：https://blog.csdn.net/NPower_Zhang/article/details/68924639

14、excel 转json(让数字不带双引号): https://www.jianshu.com/p/712b00dc992b

Git clone一下数据，在vs(visual studio)打开，修改错误，

选择excel表格

15、组件化（多个vue）https://blog.csdn.net/weixin_33908217/article/details/94299344

<template>
<div id='app'>
  <v-login></v-login>
  <v-hello></v-hello>
</div>   
</template>
<script>
/*
1、注册组件（新建文件）
2、引用组件（import login from './components/login'）
3、声明组件（'v-login':login,）
4、挂载组件（<v-hello></v-hello>）
*/

import login from './components/login'
import hello from './components/HelloWorld'
export default {
  name: 'App',
  data(){
      name:'App'
    return{
      message: '',
     
      
    }
  },
  methods:{
    
 },
 components:{
     'v-login':login,
     'v-hello': hello 
 }
}

</script>

<style>
 
</style>

16、两种方法实现返回上一页按钮功能

https://blog.csdn.net/qq_42177730/article/details/94433091

17、yarn安装：https://blog.csdn.net/yw00yw/article/details/81354533

18：eclipse安装： https://www.eclipse.org/downloads/

19、jeecg-boot怎么导入到本地运行？

https://cloud.tencent.com/developer/article/1452216?client=tim&ADUIN=1036057631&ADSESSION=1565224352&ADTAG=CLIENT.QQ.5603_.0&ADPUBNO=26882

20、yarn报错error An unexpected error occurred: "https://registry.yarnpkg.com...connect ETIMEDOUThttps://blog.csdn.net/pznavbypte/article/details/90710878

21、cmd进入后台，cd C:\Users\Administrator\Desktop\代码生成器\项目\jeecg-boot\jeecg-boot路径进入文件夹，mvn install，

22、eclipse安装lombok插件

https://blog.csdn.net/qq_25646191/article/details/79639633?tdsourcetag=s_pctim_aiomsg

23、vue编辑新增公用一个弹窗，有用：https://segmentfault.com/q/1010000015767604

24、实现增删改项目：http://www.jq22.com/jquery-info18175

我就是你的语法糖️

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue router实现简单的跳转

1、自己创建一个项目 https://www.jianshu.com/p/02b12c600c7b搭建vue脚手架：https://www.jianshu.com/p/df449848e911，按照这个做npmstart运行是有问题的，在package.json scripts中加入"start": "npm run dev",就可以了2、组件深刻了解vue组件：https:/...
复制链接

扫一扫