VUE路由基本操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue路由</title>
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">one</router-link>
<router-link to="/two">two</router-link>
<router-link to="/three">three</router-link>
<!-- 一定要定义路由的出口 -->
<router-view></router-view>
</div>
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const T1 = {
template: '<div>one</div>'
}
const T2 = {
template: '<div>two</div>'
}
const T3 = {
template: '<div>three</div>'
}
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [{
path: '/',
redirect: '/one'
}, {
path: '/one',
component: T1
}, {
path: '/two',
component: T2
}, {
path: '/three',
component: T3
}]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
VUE路由基本操作的更多相关文章
- Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- Vue路由学习心得
GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍 1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...
- VUE路由新页面打开的方法总结
平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 10.3 Vue 路由系统
Vue 路由系统 简单示例 main.js import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- 产品代码都给你看了，可别再说不会DDD（五）：请求处理流程
这是一个讲解DDD落地的文章系列,作者是<实现领域驱动设计>的译者滕云.本文章系列以一个真实的并已成功上线的软件项目--码如云(https://www.mryqr.com)为例,系统性地讲 ...
- OpenCASCADE 显示对象设置不可选中
原有的选中模式代码: static Standard_Integer SelectionMode (const TopAbs_ShapeEnum theShapeType) { switch (the ...
- 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(1)
在我们的SqlSugar的开发框架中,整合了Winform端.Vue3+ElementPlus的前端.以及基于UniApp+Vue+ThorUI的移动前端几个前端处理,基本上覆盖了我们日常的应用模式了 ...
- vue3探索——5分钟快速上手大菠萝pinia
温馨提示:本文以vue3+vite+ts举例,vite配置和ts语法侧重较少,比较适合有vuex或者vue基础的小伙伴们儿查阅. 安装pinia yarn yarn add pinia npm npm ...
- 每日一库：lumberjack -- 日志轮换和管理
在开发应用程序时,记录日志是一项关键的任务,以便在应用程序运行时追踪问题.监视性能和保留审计记录.Go 语言提供了灵活且强大的日志记录功能,可以通过多种方式配置和使用.其中一个常用的日志记录库是 gi ...
- lvm格式化挂载分区
1.从物理磁盘创建lvm分区 物理磁盘 /dev/sdb 20G 2.使用fdisk工具创建lvm分区 3.修改默认的分区类型 4.查看新建的分区 5.创建物理卷pv 6.创建逻辑卷组vg,并查看详情 ...
- Springboot简单功能示例-4 自定义加密进行登录验证
springboot-sample 介绍 springboot简单示例 跳转到发行版 查看发行版说明 软件架构(当前发行版使用) springboot hutool-all 非常好的常用java工具库 ...
- tensorboard可视化点云
tensorboard可视化点云 用 tensorboard 自带的 add_mesh 方法:支持可视化点云和网格,参考链接: tensorflow 网站的tensorboard pytorch 网站 ...
- Vue之属性
Vue中的属性:举例 看一下就明白了 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- OI 模板合集
update on 2023.10: 这篇博客的原本意义是 方便直接复制 / 快速复习,但部分原有代码存在本质错误,完全没有起到这个作用,故重构. 由于折叠代码块在某些 markdown 编辑器中不支 ...