vue-router-1-安装与基本使用
npm install vue-router
import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter)
//使用最新的开发版
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build
<div id="app">
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
// 1. 定义(路由)组件,可以 import 进来
const Foo = { template: '<div>foo</div>' } // 2. 定义路由
const routes = [
{ path: '/foo', component: Foo },
] // 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
}) // 4. 创建和挂载根实例,通过 router 配置参数注入路由,
const app = new Vue({
router
}).$mount('#app')
vue-router-1-安装与基本使用的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- Vue Router的入门以及简单使用
Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- Vue Router 使用方法
安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
随机推荐
- 优雅地记录Python程序日志2:模块组件化日志记录器
本文摘自:https://zhuanlan.zhihu.com/p/32043593 本篇将会涉及: logging的各个模块化组件 构建一个组件化的日志器 logging的模块组件化 在上一篇文章中 ...
- DVWA渗透测试环境搭建
DVWA(Damn Vulnerable Web Application)是一个用来进行安全脆弱性鉴定的PHP/MySQL Web应用,旨在为安全专业人员测试自己的专业技能和工具提供合法的环境,帮助w ...
- java maven项目 pom.xml plugin 报错, build path 找不到 jconsole-1.8.0.jar 和 tools-1.8.0.jar 包
maven项目pom.xml突然报错,在Java Build Path 中并没有引用的jar包出现在了Maven Dependencies的依赖包中. 这个错误直接导致了pom.xml文件中 < ...
- R基本图形示例及代码(持续收集)
分布图 hist(MetaData$genes, breaks = 100, main = "Gene number distribution", xlab = "Gen ...
- 图像识别 | AI在医学上的应用 | 深度学习 | 迁移学习
参考:登上<Cell>封面的AI医疗影像诊断系统:机器之心专访UCSD张康教授 Identifying Medical Diagnoses and Treatable Diseases b ...
- LeetCode--278--第一个错误的版本
问题描述: 你是产品经理,目前正在带领一个团队开发新的产品.不幸的是,你的产品的最新版本没有通过质量检测.由于每个版本都是基于之前的版本开发的,所以错误的版本之后的所有版本都是错的. 假设你有 n 个 ...
- 蓝鲸DevOps深度解析系列(1):蓝盾平台总览
关注嘉为科技,获取运维新知 2018年10月,嘉为科技与腾讯云.蓝鲸智云携手,在北京.上海.广州.深圳举办 “研运一体,数据驱动,让运维走向运营”为主题的分享会,来自金融.电力.能源.制造等行业的 ...
- 如何使用Web3.js API 在页面中进行转账
本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...
- 2.4 UML类图
类图定义 类class的定义 具有相同属性.操作.方法.关系或者行为的一组对象的描述符 类是真实世界事物的抽象 问题领域的类:在对系统建模时,将会涉及到如何识别业务系统中的事物,这些事物构 成了整个业 ...
- PostgreSQL常用查看命令
1. 查看当前库sehcma大小,并按schema排序 SELECT schema_name, pg_size_pretty(sum(table_size)::bigint) as "dis ...