安装并引用

安装

npm install vue-router

引用

步骤一:在src路径下,创建router文件夹, 其下创建index.js

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router' // 1.安装插件
Vue.use(VueRouter) // 2.创建路由对象
const routes = [
{
path: '',
redirect: '/home'
},
{
path: '/home',
component: Home
},
] const router = new VueRouter({
routes,
mode: 'history'
}) // 3.导出router
export default router

步骤二: 在main.js中挂载路由

// main.js挂载路由
import Vue from 'vue'
import App from './App.vue'
import router from './router' Vue.config.productionTip = false new Vue({
render: h => h(App),
router
}).$mount('#app')

手动安装vur-router并引用的更多相关文章

  1. vue-devtools(vue 2.0)手动安装与使用 ? 如何处理Vue.js is detected on this page ?

    vue-devtools手动安装与使用   一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三. ...

  2. maven手动安装jar包到本地仓库,以ojdbc6为例

    在做mybatis generator的中文注释实现时,感觉每次都要在配置文件中指定ojdbc6的位置太麻烦了,别人用也不方便,没有的还得自己去下,所以就想直接把ojdbc6打包到项目里,这样拿到就可 ...

  3. windows服务的编写,手动安装与卸载

    windows服务的编写 1.要添加的引用 using System.ServiceProcess; using System.ServiceModel ; using WcfServiceLibra ...

  4. Ubuntu16手动安装OpenStack

    记录大佬的博客全文转载于https://www.voidking.com/dev-ubuntu16-manual-openstack-env/ 前言 <Ubuntu16安装OpenStack&g ...

  5. Yii2 手动安装yii2-imagine插件

    由于网络的原因使用composer安装Yii框架,实在太过痛苦,所以这里干脆就手动安装yii-imagine的扩展. 首先下载yii2-image和Imagine扩展库,点击链接就可以从百度云下载上传 ...

  6. 将Apache手动安装成Windows的服务

    将Apache手动安装成Windows的服务 可以选择在安装Apache时自动将其安装为一个服务.如果选择"for all users",那么Apache将会被安装为服务. 如果选 ...

  7. python 利用 setup.py 手动安装django_chartit

    手动安装django_chartit库 1 下载压缩包 2 解压到python安装目录下,文件夹名为django_chartit,并检查文件夹下是否有setup.py文件 3 在cmd中进入djang ...

  8. Mac下手动安装Chromedriver.exe

    Mac OS X Yosemite 10.10.4下,ChromeDriver运行异常,需要手动安装chromedriver.exe Step 1: 打开https://sites.google.co ...

  9. windows下手动安装和配置xamarin

    安装xamarin xamarin官方给出了两种安装方式,自动安装和手动安装. 自动安装比较简单,到http://xamarin.com/download下载xamarininstaller.exe ...

  10. Xamarin 手动安装步骤+破解(最新版Xamarin V3)

    Create native iOS, Android, Mac and Windows apps in C#. 看到这句话,你就知道Xamarin是什么了,对于C#开发者,这样的标语还是会让你激动一下 ...

随机推荐

  1. Python变量的数据类型

    主要内容 jupyter notebook的用法 变量 跟vi/vim的编辑模式很像 # 声明的三种格式 # 格式1 s1 = "我爱王晓静" # 格式2 s2 = s1 = &q ...

  2. [C++基础入门] 7、 指针

    文章目录 7 指针 7.1 指针的基本概念 7.2 指针变量的定义和使用 7.3 指针所占内存空间 7.4 空指针和野指针 7.5 const修饰指针 7.6 指针和数组 7.7 指针和函数 7.8 ...

  3. Go坑:time.After可能导致的内存泄露问题分析

    Go 中 time.After 可能导致的内存泄露 一.Time 包中定时器函数 go v1.20.4 定时函数:NewTicker,NewTimer 和 time.After 介绍 time 包中有 ...

  4. 微服务 - Nginx网关 · 进程机制 · 限流熔断 · 性能优化 · 动态负载 · 高可用

    系列目录: 微服务 - 概念 · 应用 · 通讯 · 授权 · 跨域 · 限流 微服务 - 集群化 · 服务注册 · 健康检测 · 服务发现 · 负载均衡 微服务 - Redis缓存 · 数据结构 · ...

  5. Python网页开发神器fac 0.2.8、fuc 0.1.28新版本更新内容介绍

    fac项目地址:https://github.com/CNFeffery/feffery-antd-components fuc项目地址:https://github.com/CNFeffery/fe ...

  6. 2020-11-21:java中,什么是跨代引用?

    福哥答案2020-11-21: [答案来自此链接:](http://bbs.xiangxueketang.cn/question/404) 跨代引用常出现与 CMS 分代收集时需要使用可达性分析判断对 ...

  7. 安装vue cli3以及配置环境 镜像下载

    安装vue cli3以及配置环境 镜像下载 1.下载安装Node.js 安装vue cli3之前需要先安装Node.js,方便对vue进行下载 node.js的下载与安装方法在隔壁哟 地址:https ...

  8. 图数据库 NebulaGraph 的内存管理实践之 Memory Tracker

    数据库的内存管理是数据库内核设计中的重要模块,内存的可度量.可管控是数据库稳定性的重要保障.同样的,内存管理对图数据库 NebulaGraph 也至关重要. 图数据库的多度关联查询特性,往往使图数据库 ...

  9. 2013年蓝桥杯C/C++大学B组省赛真题(翻硬币)

    题目描述: 明正在玩一个"翻硬币"的游戏. 桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:**oo***oooo 如 ...

  10. linux 账户和权限

    目录 一.用户账户管理 二.组账号管理 三.用户账户文件和组账户文件 四.查询账户命令 五.设置目录与文件权限 六.设置命令与文件归属 七.默认文件属性umask 八.修改主机名 一.用户账户管理 u ...