Vue-router的用法与使用步骤
Vue-router的使用步骤：
Vue Router的使用步骤还是比较清晰的，按照步骤一步一步就能完成路由操作
A.导入js文件
B.添加路由链接
C.添加路由占位符(最后路由展示的组件就会在占位符的位置显示)
D.定义路由组件
E.配置路由规则并创建路由实例
F.将路由挂载到Vue实例中；
Vue-router的使用方法 代码如下：
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入顺序不能乱 -->
<script src="./vue_2.5.22.js"></script>
<script src="./vue-router_3.0.2(1).js"></script>
</head> <body>
<!-- 被VM实例所控制的区域 -->
<div id="app">
<!--
router-link是Vue中提供的标签 默认会被渲染为a标签
to属性默认会被渲染为href属性
to属性的值默认会被渲染为#开头的hash地址
-->
<router-link to='/user'>User</router-link>
<router-link to='/register'>Register</router-link> <!--
路由填充位(也叫作占位符)
将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
-->
<router-view></router-view>
</div>
<script>
// 创建路由组建
const User = {
template: '<h1>User 组件</h1>'
} const Register = {
template: '<h1>regiter 组件</h1>'
} // 创建路由实例对象
const router = new VueRouter({
// 所有的路由规则
routes: [
// 两个路由规则 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
// path 表示当前路由规则匹配的hash地址 router-link to里面是谁就要写谁 要一一对应
// component 表示当前路由规则对应要展示的组件 只接收组件对象、不接受字符串 后面接const常量后面定义的
{ path: '/user', component: User },
{ path: '/register', component: Register }
]
}) // 创建VM对象
const vm = new Vue({
// 指定控制的区域
el: '#app',
data: { },
// 挂载路由实例对象 为了能够让路由规则生效 必须把路由对象挂载到Vue实例对象上
// router:router
router
})
</script>
</body> </html>
Vue-router的用法与使用步骤的更多相关文章
- vue router相关用法
router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之 ...
- Vue 国际化 vue-i18n 用法详解
vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm) npm insta ...
- vue router 跳转到新的窗口方法
在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- Vue躬行记（8）——Vue Router
虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南（ Vue Router 上）
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router的导航解析过程
在我没读官方的vue router文档之前,我怎么也没想到路由的解析过程竟然有12步. 12步如下: 导航被触发. 在失活的组件里调用离开守卫beforeRouteLeave . 调用全局的 befo ...
- Vue.js路由管理器 Vue Router
起步 HTML <script src="https://unpkg.com/vue/dist/vue.js"></script> <script s ...
随机推荐
- three.js 着色器材质之变量（一）
上一篇说顶点着色器和片元着色器的皮毛,这篇郭先生说一说着色器变量,通过变量可以设置材质.先看看今天要做的如下图.在线案例请点击博客原文. 在这个案例之前,我们先复习一下着色器变量 Uniforms是所 ...
- 标星7000+，这个 Python 艺术二维码生成器厉害了！
微信二维码,相信大家也并不陌生,为了生成美观的二维码,许多用户都会利用一些二维码生成工具. 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手 ...
- Java多线程入门及实战
基本概念: 1: 程序 2 进程 3 线程 4 进程和线程的区别 5 进程和程序的区别 Java实现多线程的方法: 1 继承Thread 2 实现Runable 3 实现callable 4 线程池的 ...
- 代码优化之return 减少括号嵌套
代码优化之return 减少括号嵌套 例如下面的公共方法 // 优化 substring方法 解决边界越界问题 空指针问题 优化前 public static String subString ...
- C#LeetCode刷题之#589-N叉树的前序遍历（N-ary Tree Preorder Traversal）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4090 访问. 给定一个 N 叉树,返回其节点值的前序遍历. 例如 ...
- C#LeetCode刷题-堆
堆篇 # 题名 刷题 通过率 难度 23 合并K个排序链表 39.4% 困难 215 数组中的第K个最大元素 51.5% 中等 218 天际线问题 32.9% 困难 239 滑动窗口最大值 ...
- Windows下的Minio启动命令
1.首先安装Minio到你的 Windows系统的盘符中,例如D盘 2. 打开dos命令行,进入存放minio.exe的文件夹下,输入 minio.exe server /data 命令,意味着启动 ...
- 聊聊MySQL常用的4种主从复制架构
目录 一主多从复制架构 多级复制架构 双主(Dual Master)复制架构 多源(Multi-Source)复制架构 如何优化主从延迟问题? 复制的4中常见架构有一主多从复制架构.多级复制架构.双主 ...
- 求正整数2和n之间的完全数
[题目描述] 求正整数22和nn之间的完全数(一行一个数). 完全数:因子之和等于它本身的自然数,如6=1+2+36=1+2+3 [输入] 输入n(n≤5000)n(n≤5000). [输出] 一行一 ...
- 1.MongoDB 2.7主从复制(master –> slave)环境基于时间点的恢复
(一)MongoDB恢复概述 对于任何类型的数据库,如果要将数据库恢复到过去的任意时间点,否需要有过去某个时间点的全备+全备之后的重做日志,MongoDB也不例外.使用全备将数据库恢复到固定时刻,然后 ...