Vue前端路由

1. npm install vue-router --save

2.脚手架安装


一、目录结构

二、index.js

// 0.导入vue和路由插件
import Vue from 'vue'
import VueRouter from 'vue-router' import Home from "../components/Home"
import About from "../components/About" // 1.通过Vue.use(插件),安装插件
Vue.use(VueRouter); // 2. 创建VueRouter对象
const routers = [
{
// 6.0 配置路由和组件之间的映射关系
path: '/home',
component: Home
},
{
path: "/about",
component: About
}, ]; const router = new VueRouter({
// 6.1 配置路由和组件之间的映射关系
// router:router, 下面是es6字面量的增强写法
routers }); // 3. 先导出,将router对象传入到Vue实例
export default router

三、main.js

 import Vue from 'vue'
import App from './App'
// 4.在main.js里面导入router
import router from './router'
// 如果导入一个文件夹,它会自动找到该文件夹下的index文件 Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
// 5.Vue里面挂载router
router,
render: h => h(App)
})

四、App.vue

 <template>
<div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<!-- router-view相当于占位-->
<router-view></router-view> </div>
</template> <script>
export default {
name: 'App'
}
</script> <style> </style>

01.vue-router的基本使用的更多相关文章

  1. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  2. 8. Vue - Router

    一.Vue Router 的使用 JavaScript: 1.创建组件:创建单页面应用需要渲染的组件 2.创建路由:创建VueRouter实例 3.映射路由:调用VueRouter实例的map方法 4 ...

  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. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

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

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

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

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

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

随机推荐

  1. windows上docker部署springboot多实例

    前提条件: 1.可以运行jar包的环境2.机器上已经安装了docker3.准备部署的springboot的jar包4.Dockerfile文件 准备Dockerfile FROM java:8 VOL ...

  2. spring cloud系列教程第四篇-Eureka基础知识

    通过前三篇文章学习,我们搭建好了两个微服务工程.即:order80和payment8001这两个服务.有了这两个基础的框架之后,我们将要开始往里面添加东西了.还记得分布式架构的几个维度吗?我们要通过一 ...

  3. mybatis多对一与一对多

    步骤: 1.创建maven项目 2.编写工具类 3.编写实体类 4.编写mapper接口 5.配置xml 6.测试 多对一:多个学生关联一个老师 工具类: //sqlSessionFactory -- ...

  4. P2756 飞行员配对方案问题 网络流

    P2756 飞行员配对方案问题 #include <bits/stdc++.h> using namespace std; , inf = 0x3f3f3f; struct Edge { ...

  5. 201771010120 苏浪浪 面向对象程序设计(Java)第10周

      1.实验目的与要求 (1) 理解泛型概念: (2) 掌握泛型类的定义与使用: (3) 掌握泛型方法的声明与使用: (4) 掌握泛型接口的定义与实现: (5)了解泛型程序设计,理解其用途. 2.实验 ...

  6. LaunchScreen作为启动图设置,修改无效的解决方案

    原有的推流APP用launchScreen做的启动图,现在要修改一张,发现修改无效. 当前测试的方法有 1,重启Xcode  卸载app 清楚xcode缓存 2,修改launchScreen.stor ...

  7. Less定义变量

    1. 定义: 使用 @ 符号来定义变量 ,在Less中开头是 @ 则是变量,关于变量的命名方法,大家可以参考js中命名的规则,毕竟是做前端的,有着统一的习惯有助于我们统一风格.个人推荐变量名的命名规则 ...

  8. JNPF低代码开发框架代码生成器设计

    1.代码生成器目录下有通用开发模板.单表开发模板.多表开发模板.流程表单模板.移动开发模板等: ①代码生成器录下通用开发模板页面,有搜索.上步.下步.下载代码功能操作: ②输入查询条件表名关键字进行搜 ...

  9. FPGA开发工具套餐搭配推荐及软件链接 (更新于2020.03.16)

    一.Xilinx(全球FPGA市场份额最大的公司,其发展动态往往也代表着整个FPGA行业的动态) (1) Xilinx官方软件下载地址链接: https://china.xilinx.com/supp ...

  10. [Objective-C] 012_数据持久化_XML属性列表,NSUserDefaults

    在日常开发中经常要对NSString.NSDictionary.NSArray.NSData.NSNumber这些基本类的数据进行持久化,我们可以用XML属性列表持久化到.plist 文件中,也可以用 ...