适用于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 组装的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. Vue Router的简单了解

    Vue Router Vue Router官方文档 传统Web项目开发往往采用超链接实现页面之间的切换和跳转.Vue开发的是单页面应用(Single Page Application,SPA),不能使 ...

  3. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  4. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  6. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  7. 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 ...

  8. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  9. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  10. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. Mac下CUDA开启及Tensorflow-gpu安装

    本文由@ray 出品,转载请注明出处.  文章链接:http://www.cnblogs.com/wolfray/p/8040694.html 在之前的文章中,笔者介绍了在Mac下安装Tensorfl ...

  2. C语言简单实现链栈基本几个功能(适合新手看,大神可指正)

            接着上一次的顺序栈,今天我记一下链栈,因为我也是刚学不久,有些地方也稍稍理解不了,所以,一起共勉.我会用我自己结合教材上画的图,争取跟代码一起结合,用文字和图最大化的解释代码,这样的话 ...

  3. 小tip:生成一组不重复的随机数(去重的方法)

    var arr = []; for(var i=0;i<150;i++){ // num为0-100的随机数 var num = Math.round(Math.random()*100); v ...

  4. java多线程核心技术——第四章总结

    第一节使用ReentrantLock类 1.1使用ReentrantLock实现同步:测试1 1.2使用ReentrantLock实现同步:测试2 1.3使用Condition实现等待/同步错误用法与 ...

  5. JavaWeb核心技术学习 - 1.从JDBC说起

    作者:java1to3链接:http://www.cnblogs.com/java1to3/著作权归作者所有.未经作者本人同意,禁止一切转载.商业或非商业转载请联系作者获得授权并请注明出处. ・JDB ...

  6. POI颜色设置

    package com.java.connect.poi; import java.io.FileOutputStream; import java.io.IOException; import or ...

  7. Linux网络编程--wireshark分析TCP包头的格式

    摘要:     本文简介了TCP面向连接理论知识,具体讲述了TCP报文各个字段含义.并从Wireshark俘获分组中选取TCP连接建立相关报文段进行分析. 一.概述     TCP是面向连接的可靠传输 ...

  8. Java序列化框架性能比較

    博客: http://colobu.com jvm-serializers提供了一个非常好的比較各种Java序列化的的測试套件. 它罗列了各种序列化框架. 能够自己主动生成測试报告. 我在AWS c3 ...

  9. 原来你是这样的JAVA[01]-基础一瞥

    1.Java是什么呢? Java不仅是一门语言,而且是一个完整的平台,有一个庞大的库,其中包含了很多可重用的代码和一个提供安全性.跨操作系统的可移植性以及自动垃圾收集等服务的执行环境. 2.JDK 和 ...

  10. 基于权限安全框架Shiro的登录验证功能实现

    目前在企业级项目里做权限安全方面喜欢使用Apache开源的Shiro框架或者Spring框架的子框架Spring Security. Apache Shiro是一个强大且易用的Java安全框架,执行身 ...