安装并引用

安装

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. Java设计模式【单例模式】

    Java设计模式[单例模式] 单例模式 单例模式(Singleton Pattern)是一种创建型设计模式,其主要目的是确保一个类只有一个实例,并提供对该实例的唯一访问点. 优缺点 优点: 提供了对唯 ...

  2. 2021-11-12:前 K 个高频元素。给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。提示:1 <= nums.length <=

    2021-11-12:前 K 个高频元素.给你一个整数数组 nums 和一个整数 k ,请你返回其中出现频率前 k 高的元素.你可以按 任意顺序 返回答案.提示:1 <= nums.length ...

  3. vue 中render执行流程梳理

    用了多年vue 今天对自己了解的render 做一个梳理 一.使用template模板 先从vue 初始化开始: 众所周知项目的main.js中定义了 var app = new Vue({})这vu ...

  4. 渗透测试-struts2攻防环境搭建拿shell

    一.下载Jspstudy 打开目录D:\JspStudy\tomcat\webapps 二.打开struts2并进行拿shell 1.打开struts2 在浏览器中输入网址http://localho ...

  5. Groovy 基于Groovy实现MD5加密

    groovy 3.0.7 代码实现 实现方式1 import java.security.MessageDigest; public class MD5Utils { public final sta ...

  6. Python网页开发神器fac 0.2.9、fuc 0.1.29新版本更新内容介绍

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

  7. 基于 Dash Bio 的生物信息学数据可视化

    Dash 是用于搭建响应式 Web 应用的 Python 开源库.Dash Bio 是面向生物信息学,且与 Dash 兼容的组件,它可以将生物信息学领域中常见的数据整合到 Dash 应用程序,以实现响 ...

  8. 写一个Python简单的Socket网络通讯

    完成需求 用Python完成一个简单的Socket通讯实例 1. 服务端 用于提供服务 源码: import socket s = socket.socket() # 创建服务器端套接字 # sk.s ...

  9. ZYNQ 启动过程简介 以及 ZYNQ 裸机生成BOOT.BIN

    背景 下图是ZYNQ的启动过程 上电复位等完成后,先执行BootRom,然后再根据MIO设定的启动方式选择对应从哪里启动,无论从哪里启动,都需要一个BOOT.BIN文件,对于裸机程序来说: BOOT. ...

  10. 2023-06-17:说一说redis中渐进式rehash?

    2023-06-17:说一说redis中渐进式rehash? 答案2023-06-17: 在Redis中,如果哈希表的数组一直保持不变,就会增加哈希冲突的可能性,从而降低检索效率.为了解决这个问题,R ...