vue-router配置介绍和使用方法（一）
文章目录
- 1. `vue-router`配置流程概述：
- 1) 准备工作：
- 2) 在`main.js`文件中，进行关于（首页）主体文件（App.vue）的基础配置：
- 3) 建立相关路由文件夹，及相关路由文件（类如`home.vue/about.vue`文件）
- 4) 留坑，在```app.vue```文件中留坑，如右侧代码： ``````
- 5) `new Vue` 启动 ，如右侧代码：```new Vue({ •••省略••• });```
- 6) 最后浏览器查看下实时效果。
- 效果图预览：
- 2. 文件目录结构预览：
- **3. 相关代码，参看如下：**
- main.js文件
- app.vue文件
- home.vue文件
1. vue-router配置流程概述：
1) 准备工作：
- 建立
vue.js项目文件夹，通过cmd命令，完成新建文件夹的相关项目配置（具体操作，请参考“如何进行 node.js的 安装与卸载 ”）； vue init webpack项目文件名- 接着按要求配置
Project name、author、vue-router（选择Yes）等等相关参数 cd 项目文件名npm installnpm run dev
2) 在main.js文件中，进行关于（首页）主体文件（App.vue）的基础配置：
引入
Vue主体引入
vue-router主体引入一个个
link路由对象：- 在
main.js文件中，创建路由对象并配置路由规则（如下绿色加粗代码）：let router = new VueRouter({//routesroutes: [//component后面是一个个link对象{path: '/home',name: 'app',component: Home},{path: '/hello',name: 'app',component: HelloWorld}]});// 注意：单词拼写是： ```component```, 不加 ```s```！
- 在
安装插件vue-router（挂载属性） ，如右侧代码：Vue.use(VueRouter);
3) 建立相关路由文件夹，及相关路由文件（类如home.vue/about.vue文件）
4) 留坑，在app.vue文件中留坑，如右侧代码： <router-view></router-view>
5) new Vue 启动 ，如右侧代码：new Vue({ •••省略••• });
6) 最后浏览器查看下实时效果。
效果图预览：
2. 文件目录结构预览：
3. 相关代码，参看如下：
main.js文件
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主体（页面初始化显示）
import App from './components/app.vue';
//一个个link对象 - 分类
import Home from './components/home.vue';
import HelloWorld from '@/components/HelloWorld';//安装插件
Vue.use(VueRouter);//挂载属性//创建路由对象并配置路由规则
let router = new VueRouter({//routesroutes: [//一个个link对象{path: '/home',name: 'app',component: Home},{path: '/hello',name: 'app',component: HelloWorld}]
});/* new Vue 启动 */
new Vue({el: '#app',render: c => c(App),//让vue知道我们的路由规则router:router,//可以简写为router
})
app.vue文件
<template><div><!--留坑，非常重要--><router-view></router-view> </div>
</template><script>export default {data(){return{}},methods:{}}
</script><style scoped>
</style>
home.vue文件
<template><div>我是主页</div>
</template><script>
</script><style scoped>
</style>
以上就是关于“vue-router配置介绍和使用方法（一）”的全部内容。
vue-router配置介绍和使用方法（一）相关推荐
- vue-router配置介绍和使用方法（二）
本文主要介绍:router-link路由的配置方法? vue-router路由设置 需求目的:通过<a></a>标签的点击,实现页面的数据跳转 要点: 去哪里? <rou ...
- vue-router配置介绍和使用方法（三）
文章目录 ```一劳永逸```的```router-link```路由的配置办法? vue-router路由设置 要点: 请仔细对比学习: 实现效果对比: 主要文件的代码如下: app.vue文件 m ...
- （50）Vue Router插件介绍
一.Vue Router插件介绍 Vue Router 是 Vue.js 的官方插件,用来快速实现单页应用. 二.Vue Router学习内容 • 单页应用 • 前端路由 • Vue Router 三 ...
- Vue中路由管理器Vue Router使用介绍（三）
2019独角兽企业重金招聘Python工程师标准>>> 一.路由定义添加动态参数定义 1.路由定义项,使用:xx 方式 定义动态参数 {path:'/user/:id/:name', ...
- vue项目接口地址暴露_vue项目打包后可以配置接口地址的方法
因为项目测试的需要,我需要给测试人员一个项目的测试环境版本和生产环境版本,两个版本的区别就是请求的接口地址不一样而已,一开始,我是在webpack配置了不同的命令,让测试去打包,比如:使用npm ru ...
- 创建Vue项目，找不到router文件（router.js）的解决方法
创建Vue项目,找不到router文件(router.js)的解决方法 问题描述: 安装 Vue Router 原因分析: 解决方案: 命令窗口创建 使用图形化界面 问题描述: 如图所示: 安装 Vu ...
- Vue的router配置
新建一个router文件夹专门存放路由配置 1.main.js // 配置路由相关信息 import Vue from 'vue'; import App form './App' import ro ...
- vue router连续点击多次路由报错根本原因和解决方法
原因: vue-router 升级到 3.1.x 后,重复点击导航时,控制台出现报错 ,vue router ≥ v3.1 后 ,回调形式改成 promise api 了,返回的是 promise,如 ...
- Vue学习记录8，vue脚手架配置代理的两种方式，Github搜索案例，vue-resource，三种插槽，Vuex及搭建Vuex环境，getter和四个map方法的使用， 模块化+命名空间
目录 vue脚手架配置代理 方法一 方法二 Github搜索案例 UserList.vue UserSearch.vue 效果图 vue-resource 插槽 默认插槽 具名插槽 作用域插槽 Vue ...
最新文章
- 16岁日本神童打造日版「健康码」，追踪用户行动数据抗击疫情
- FootSwitch脚踏开关:三位USB静音脚踏板脚踏开关脚踏键盘鼠标
- dsp处理浮点数_关于IQMATH和浮点数在DSP的深入理解
- 【迁移学习(Transfer L)全面指南】Pytorch处理体积数据
- UVa 12012 - Detection of Extraterrestrial(hash)
- Ubuntu18.04安装常用软件
- Linux IP 配置
- 呵呵，幸亏当初选了这个ＢＬOG
- pwm波程序如何实现_【优秀成果】如何做好算法与程序实现教学的知识储备
- 如何选择嵌入式软件开发平台
- EventBus框架原理解析(结合源代码)(上)
- 联想r720游戏音效增强功能消失的解决
- 树的计数 + prufer序列与Cayley公式(转载)
- HTTPS为什么安全 分析 HTTPS 连接建立全过程
- mgo EnsureIndex注意事项
- AutoDL云服务器使用（2）-虚拟环境搭建
- CAD引线标注文字大小怎么调整？
- Debian 9.5安装intel 8260AC无线网卡成功
- 【毕设选题】最新51单片机毕业设计项目集合 - 500例
- 项目笔记-基于VUE2.0的电商后台管理系统（一）