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@ ...
随机推荐
- JAVA基础知识总结:二十一
一.URL和URLConnection 1.HTTP 超文本传输协议 是一个应用层的协议 是一个被动的协议 只有客户端主动给服务端发送消息,服务端才会给客户端一个响应 2.URL 统一的资源定位符(网 ...
- 手机网页唤醒app,
1.在系统系统自带的浏览器中 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]">启动应用 ...
- Bulk RNA-Seq转录组学习
与之对应的是single cell RNA-Seq,后面也会有类似文章. 参考:https://github.com/xuzhougeng/Learn-Bioinformatics/ 作业:RNA-s ...
- p1473 Zero Sum
搜索,最后判断一下是否结果为0就行. #include <iostream> #include <cstdio> #include <cmath> #include ...
- git部署
1. 自动部署原理 先讲实现方法和原理.Git服务和仓库都是在服务器上的,服务器上的Web目录和本地都有完整的代码.Git有个叫hook的机制,可以在代码更新时执行回调(执行一段shell).一般执行 ...
- MySQL事务(一)
一.基本介绍 事务就是一组dml语句,这些语句存在逻辑上的相关性,这一组dml语句要么全部成功,要么全部失败,是一个整体.ACID属性(原子性,一致性,隔离性,持久性):mysql提供一种机制,保证我 ...
- 『cs231n』通过代码理解风格迁移
『cs231n』卷积神经网络的可视化应用 文件目录 vgg16.py import os import numpy as np import tensorflow as tf from downloa ...
- HDU - 4436sam裸题
题意:给你多个数字串,求本质不同的子串和(去掉前导零) 题解:建广义sam,刚开始一直想的是用l来计算,发现前导零对l的影响根本消不掉,所以不会做= =,原来应该是直接用一个新的数组表示到当前有多少个 ...
- 数组的typedef 和函数的typedef
#include<stdio.h> #include<string.h> #include<stdlib.h> // 数组指针 语法 梳理 // //int a[1 ...
- jq判断网页是在什么浏览器打开的
有的时候项目中有需要用户扫描二维码进行页面识别跳转操作的,(类似当前需要先判断是否为手机默认浏览器打开,尤其是微信打开会影响APP包的下载-微信内置的一个拦截,这对Android来说影响有点大),因此 ...