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-安装与基本使用的更多相关文章

  1. Vue 2.0 + Vue Router + Vuex

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

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

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

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

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

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

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

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

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

  6. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  7. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...

  8. 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)

    大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...

  9. Vue Router 使用方法

    安装 直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js Unpkg.com 提供了基于 NPM 的 CDN 链接.上面的链接会一直指 ...

  10. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

随机推荐

  1. <%@page contentType="text/html;charset=gbk"%> 与 <meta http-equiv="Content-Type" content="text/html; charset=GBK">区别

    前一个是在服务端起作用,是告诉应用服务器采用何种编码输出JSP文件流, 后一个是在客户端起作用,是告诉浏览器是采用何种编码方式显示HTML页面

  2. HeadFirst Ruby 第九章总结 mixins & modules

    前言 如果想要复用 method, 可用的方法是针对 Class 的 inheritance,但是, inheritance has its limitations,它的缺点有: 只能 inhert ...

  3. 常见的ORACLE语句

    基本 --新建表: create table table1( id varchar(300) primary key, name varchar(200) not null); --插入数据 inse ...

  4. 雷林鹏分享:C# 数组(Array)

    C# 数组(Array) 数组是一个存储相同类型元素的固定大小的顺序集合.数组是用来存储数据的集合,通常认为数组是一个同一类型变量的集合. 声明数组变量并不是声明 number0.number1... ...

  5. Shell脚本中的并发(转)

    转自http://blog.csdn.net/wangtaoking1/article/details/9838571 主要记录一下Shell脚本中的命令的并发和串行执行. 默认的情况下,Shell脚 ...

  6. MySQL视图(view)

    一.基本概念 视图是一个虚拟表,是sql的查询结果,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据,在使用视图时动态生成.视图的数据变化会影响到基表,基表的数据变化也会影响到视图 ...

  7. HTTP请求/响应报文结构

    HTTP协议版本有两种:HTTP1.0和HTTP1.1 它们俩的区别在于:HTTP1.0对于每个连接都只能传送一个请求和响应,请求后就会关闭,HTTP1.0没有Host字段:而HTTP1.1在同一个连 ...

  8. 子类父类(虚函数下的 引用指针 对象)->看来没有子类指针这回事

    #include<iostream> using namespace std; class Father { public: Father() { cout << " ...

  9. 把xml转成javabean的工具类

    import java.io.IOException; import java.io.StringReader; import java.io.StringWriter; import javax.x ...

  10. hdu1569-方格取数-二分图网络流

    方格取数(2) Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...