vue2 vue-router 组装
适用于vue cli搭建的项目
vue-router模块下载及记录到package.json中:
npm i vue-router -D
main.js中:
import VueRouter from ‘vue-router’ //引入模块
Vue.use(VueRouter) //使用模块,VueRouter模块里面自带有个install方法,能被Vue.use方法识别。
const router = new VueRouter({
routes:[ //参数样式 {routes:[aaa,bbb]} ,必须是routes:xxx
{path:'/xxx',component:aaa},
{path:‘/xxx’,component:bbb}
]
})
new Vue({
router //将router 实例 挂载到new Vue中就能使用了
})
//了解上面的内容,就足够了,其余的只是参数的拼接。 改写如下:
import VueRouter from ‘vue-router’
Vue.use(VueRouter)
import route1 from ‘./router.config.js’ //这儿是router.config.js的路径。如果设置routes为变量名,下面那行代码参数就写:{routes},代表{routes:routes}
const router = new VueRouter({routes:route1})
router.config.js中
import aaa from './aaa.vue' //从文件地址引入aaa组件。
import bbb from './bbb.vue' //从文件地址引入bbb组件。 export default[ //依据VueRouter的参数模式 拼接。 由于main.js参数写法,这儿正好输出json格式:[{},{}]
{
path:'/home',
component:aaa
}
]
使用:
<router-link to='/home'>点击转到aaa组件</router-link>
<router-view></router-view> <!--这儿是显示aaa组件的地方。-->
大概思路:
引入vue-router模块→Vue.use(模块)→实例化→挂载实例→使用
实例化的参数:new VueRouter({routes:[{path:'/xxx',component:aaa},{path:‘/xxx’,component:bbb]})
参数拼接:一般是将json放在config.js中,输出这个json,在main.js中引入这个json,进行拼接。这样做是为了代码清晰。
vue2 vue-router 组装的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue Router的简单了解
Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- vue router 只需要这么几步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- Vue Router学习笔记
前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)
阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
随机推荐
- C++雾中风景4:多态引出的困惑,对象的拷贝?
C++作为一门面向对象的语言,自然具备了面向对象的三大特征:封装,继承,多态.在学习多态性质的过程中,发现了C++与其他语言很大的区别(坑?).在C++中的=操作符的使用与C++呈现的内存模型似乎并不 ...
- 使用Python提取中文字符
#功能:国际化测试,用于提取应用设计包中的中文字符,并输出report#解压---筛选---整理路径---提取中文---输出报告 ################################### ...
- Java开发小技巧(二):自定义Maven依赖
前言 我们在项目开发中经常会将一些通用的类.方法等内容进行打包,打造成我们自己的开发工具包,作为各个项目的依赖来使用. 一般的做法是将项目导出成Jar包,然后在其它项目中将其导入,看起来很轻松,但是存 ...
- ConcurrentModificationException异常出现的原因
原因:对list .map 等迭代的时进行修改就会抛出java.util.ConcurrentModificationException异常 比如: public synchronized void ...
- 单源最短路径 dijkstra算法实现
本文记录一下dijkstra算法的实现,图用邻接矩阵表示,假设图为无向图.而且连通,有向图,不连通图的做法相似. 算法简述: 首先确定"单源"的源.假设是第0个顶点. 维护三个数组 ...
- 7、创建ROS msg和srv
一.msg和srv介绍 msg: msg文件使用简单的文本格式声明一个ROS message的各个域. 仅须要创建一个msg文件,就能够使用它来生成不同语言的message定义代码. srv:srv文 ...
- 简单介绍nandflash、norflash、ram、sram、dram、rom、eeprom、flash的差别
1.nandflash Nandflash是IO设备,数据.地址.控制线都是共用的,须要软件区控制读取时序, 所以不能像nor flash.内存一样随机訪问,不能EIP(片上执行).因此不能直 ...
- 介绍一个法国的时间戳server
特别说明: 以下介绍的法国时间戳server已经停止服务了.我曾发Email给相关站点的管理员.对方回复说他也不知道什么时候能恢复服务,有可能就是遥遥无期了.所以以下的内容仅有參考价值.没法实践了. ...
- gcc 源代码分析-前端篇3
3. GCC怎样函表示一个函数 对c语言来说.函数是其核心,全部的东西都在环绕着函数在转.对于一个函数来说.它基本的一些特性例如以下: 1. 有一个返回值,在这里我们没有把返回值的函数觉得它 ...
- 用jQuery绑定事件到动态创建的元素上
jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...