Vue-Cli中Vue-Router的使用

一、创建vue-cli的项目

npm create myproject

  vue create 为vue.js 3.0构建项目的命令,2.0版本可以通过vue init webpack myproject

二、安装vue-router

npm install vue-router --save

三、在目录结构的src下创建router文件夹,并创建index.js作为出口文件,同时在components文件下新建两个组件

四、在router/index.js配置相关路由

  这里我配置了三个路由,'/hello','/a','/b',并且把 '/' 重定向为 ‘/hello’

 五、在src/main.js中将路由实例挂载到vue根实例上,使得整个应用都有路由功能

六、在src/App.vue中使用router-link 标签实现跳转路由、使用router-view来实现路由显示

七、最终效果

 

Vue基础篇 (1) —— Vue-Router的使用的更多相关文章

  1. Vue基础以及指令, Vue组件

    Vue基础篇一 Vue指令 Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上. <div ...

  2. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  3. 1.基础篇之vue入门

    为了建立高效团队,很多公司会采用全栈工程师,虽然利弊兼有,对于成本优先的创业团队,肯定是首选,特别是对.net生态圈,大部分都是小公司,就更加重要了.这里记录的是对vue的学习点滴,希望对你有所助力. ...

  4. vue基础篇---vue组件

    vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...

  5. Vue 基础篇---computed 和 watch

    最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够 所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...

  6. vue基础篇---修改对象或数组的值,页面实时刷新

    这个问题估计大家很难想到,如果一个数组[1,2,3,4],然后我们v-for遍历,我们改变数组的值,arr[1] = 5 ,难道不应该改变么?按理说根据vue的特性应该是改变的,但是事实上确实数组已经 ...

  7. vue基础篇---class样式绑定

    因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  9. Vue基础之初识Vue

    Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...

  10. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

随机推荐

  1. cpprestsdk同时使用boost.asio,acceptor就一直报Invalid argument。

    本文目录,首先总结问题,然后案例还原. 总结: 问题的根本在于boost.asio作为header-only库,运行程序与动态库之间容易因为版本错配而产生运行期莫名其妙的问题. cpprestsdk使 ...

  2. CSS选择器有哪些?哪些属性可以继承?

    CSS选择符: id选择器(#myid). 类选择器(.myclassname). 标签选择器(div, h1, p). 相邻选择器(h1 + p). 子选择器(ul > li). 后代选择器( ...

  3. Java实现 蓝桥杯 算法训练VIP 报数(暴力+数学)约瑟夫环问题

    试题 算法训练 报数 问题描述 现有n个同学站成一圈,顺时针编号1至n.从1号同学开始顺时针1/2报数,报到1的同学留在原地,报到2的同学退出圆圈,直到只剩一名同学为止.问最后剩下的同学编号. 输入格 ...

  4. Java实现 蓝桥杯VIP 算法提高 多项式输出

    算法提高 多项式输出 时间限制:1.0s 内存限制:512.0MB 问题描述 一元n 次多项式可用如下的表达式表示: f(x)=a[n]xn+a[n-1]x(n-1)+-+a[1]x+a[0], a[ ...

  5. Java实现 LeetCode 39 组合总和

    39. 组合总和 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字 ...

  6. java实现第六届蓝桥杯九数分三组

    九数分三组 题目描述 1~9的数字可以组成3个3位数,设为:A,B,C, 现在要求满足如下关系: B = 2 * A C = 3 * A 请你写出A的所有可能答案,数字间用空格分开,数字按升序排列. ...

  7. Linux笔记(第一天)

    一.命令 lscpu                               -- 查看cpu free                                 -- 内存查看 -m 以M ...

  8. dfs算法总结

    DFS 深度优先搜索 主要有两种实现方法:栈和递归 什么是DFS?说白了就是一直遍历元素的方式而已,我们可以把它看成是一条小蛇,在每个分叉路口随意选择一条路线走,直到撞到南墙,才会调头返回到上一个分叉 ...

  9. 05-IntentFilter的匹配规则

    IntentFilter的匹配规则 原则上一个Intent不应该既是显示调用又是隐式调用,如果二者共存的话以显式调用为主 隐式调用需要Intent能够匹配目标组件的IntentFilter中所设置的过 ...

  10. Python--循环--for && while

    for循环示例:猜数字游戏 winning_number = 38 for i in range(3): guess_num = int(input("guess num:") ) ...