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. lua --- __newindex

    -- __newindex 对表进行更新 MyMetatable = {} MyTable = }, {__newindex = MyMetatable}) MyTable.newKey1 = pri ...

  2. Linux下的常用指令汇总

    内容提纲: 1.ubuntu安装 2.linux目录结构 3.apt.dpkg 4.date.cal.tzselect 5.修改密码.忘记密码 6.注销/重启/关机 7.cd pwd 8.-h --h ...

  3. PHP加密函数

    单向散列加密 单向散列加密是指通过对不同输入长度的信息进行散列计算,得到固定长度的输出.这个散列计算是单向的,即不能对固定长度的输出进行计算从而获取输入信息. 特征:雪崩效应.定长输出和不可逆 作用: ...

  4. 单细胞数据初步处理 | drop-seq | QC | 质控 | 正则化 normalization

    比对 The raw Drop-seq data was processed with the standard pipeline (Drop-seq tools version 1.12 from ...

  5. WPF打印涉及到的关键类

    DocumentViewer--->FixedDocument----> PageContent  ---->FixedPage

  6. selenium配置Chrome驱动

    1.http://chromedriver.storage.googleapis.com/index.html   chrome下载驱动地址 和对应的版本驱动,不用FQ 2.配置方法:如在e盘创建一个 ...

  7. MySql之安装以及设置密码等

    1.MySQL的下载安装.简单应用及目录介绍 1.下载安装 windows10的:https://www.cnblogs.com/clschao/articles/9916971.html linux ...

  8. linux安装curl扩展

    1.获得安装包,从网上直接下载或者其他途径,这里直接wget wget http://curl.haxx.se/download/curl-7.20.0.tar.gz 2.解压到当前目录(或者 htt ...

  9. hive的jdbc使用

    ①新建maven项目,加载依赖包  在pom.xml中添加 <dependency> <groupId>jdk.tools</groupId> <artifa ...

  10. 基于jquery实现页面loading加载效果

    实现loading 加载提示 ······ 透明遮罩 居中效果 具体代码如下: CSS样式部分: <style type="text/css"> .background ...