vue-router安装和配置方法
时间:2021-07-20
本文章向大家介绍vue-router安装和配置方法,主要包括vue-router安装和配置方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue-router是vue.js官方的路由插件,里面组件和URL的映射关系由vue-router帮我们管理。在vue-router的单页面应用中,页面的路径的改变就是组件的切换。
一:首先下载插件,当我们初始化项目时,有一个选项vue-router选项,我们选y,他就帮我们自动下载插件了。
如果没选,也可以手动安装 npm install vue-router --save
二:
- 导入路由对象,并且调用Vue.use(Router)
- 创建路由实例,并且传入路由映射配置
- 在vue实例中挂载创建的路由实例
index.js文件夹基本配置
使用vue-router的步骤
- 创建路由组件
- 配置路由映射:组件和路径映射关系
- 适用路由:通过<router-link>和<router-view>
<router-view>该标签会根据当前的路径,动态渲染不同的组件替换到router-view的位置。
路由的默认路径
在上面当我们想加载首页的组件,但是需要点击才可以加载相应的组件,但是有些需求例如首页是默认不用点击直接显示在页面上,这时候我们应该怎么处理呢?
在router的index.js 文件里多配置 一个映射
改变URL不跳转路径有两种方法
方法一:使用BOM对象上的location对象上的hash
方法二:使用BOM对象上的history对象
Vue-router默认使用的是第一种hash(默认)
使用hash会在路径上出现井号 #,而使用history没有井号
原文地址:https://www.cnblogs.com/wl-blog/p/15035368.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python使用矩阵分解法找到类似的音乐
- SpringBoot集成ELK实现日志收集实践
- python在Scikit-learn中用决策树和随机森林预测NBA获胜者
- R语言:用R语言填补缺失的数据
- R语言如何和何时使用glmnet岭回归
- r语言中对LASSO回归,Ridge岭回归和Elastic Net模型实现
- cmd里如何查看历史命令并执行
- akka-typed(10) - event-sourcing, CQRS实战
- 【每日一题】37. Sudoku Solver
- A quick introduction to innodb_ruby (2.对innodb_ruby的简单介绍)
- Webkit 内核初探
- 配置跨域后,框架帮我们做了什么?
- python应用(1):安装与使用
- TCP粘包和拆包
- 性能测试必备命令(1)- free