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. json 格式要求

    json 格式中, 字符串类型需要使用双引号,不能为单引号

  2. 【雕爷学编程】MicroPython动手做(05)——零基础学MaixPy之LCD液晶屏

    配套 2.4寸LCD屏 ST7789驱动器芯片(24P 320X240) ST7789驱动器芯片2.4寸LCD屏(24P 320X240)主要参数 1. 模块名称:液晶显示模块2. 型号:KD024C ...

  3. [Unity A*算法]A*算法的简单实现

    写在前面:之前看过一点,然后看不懂,也没用过. 最近正好重构项目看到寻路这块,想起来就去查查资料,总算稍微理解一点了,下面记录一下自己的成果(哈哈哈 :> ) 下面分享几篇我觉得挺不错的文章 A ...

  4. flask之session

    ''' session使用: session创建: (1)导入session from flask import session (2)设置secret_key密钥 app.secret_key='s ...

  5. 第三篇:ASR(Automatic Speech Recognition)语音识别

    ASR(Automatic Speech Recognition)语音识别: 百度语音--语音识别--python SDK文档: https://ai.baidu.com/docs#/ASR-Onli ...

  6. iperf压测linux网卡带宽

    1.安装 yum install iperf --enablerepo=epel 2.启动服务端 iperf -s -i 1 3.启动客户端测试10分钟 iperf -c 172.16.3.153 - ...

  7. mysql小白系列_04 datablock

    1.为什么创建一个InnoDB表只分配了96K而不是1M? 2.解析第2行记录格式?(用下面的表定义和数据做测试) mysql> create table gyj_t3 (),name2 var ...

  8. MySQL(9)— 规范数据库设计

    九.规范数据库设计 9-1.为什么要设计? 当数据库比较复杂时,我们就需要设计了! 糟糕的数据库设计: 数据冗余,浪费大量存储空间 使用物理外键,大量的增删改操作麻烦,异常 查询效率低下 良好的数据库 ...

  9. 【漫画】ES原理 必知必会的倒排索引和分词

    倒排索引的初衷 倒排索引,它也是索引.索引,初衷都是为了快速检索到你要的数据. 我相信你一定知道mysql的索引,如果对某一个字段加了索引,一般来说查询该字段速度是可以有显著的提升. 每种数据库都有自 ...

  10. Java入门以及使用IDEA安装和使用

    目录 JAVA第一个程序 HelloWorld 可能会遇到的情况 JAVA程序运行机制 IDEA安装 什么是IDE IDEA介绍 IDEA下载 IDEA基本使用 关于一些创建项目的小tips JAVA ...