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 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- 浅谈API安全的应用
理论基础 API它的全称是Application Programming Interface,也叫做应用程序接口,它定义了软件之间的数据交互方式.功能类型.随着互联网的普及和发展,API 从早期的 ...
- CCF 202012-5星际旅行（20~100分）
前置知识 线段树:通过懒惰标记,可实现区间处理,和区间询问皆为\(O(logn)\)时间复杂度的数据结构,是一种二叉树.因此对于一个节点\(st\),其左儿子节点为\(st*2\),右节点为\(st* ...
- 2023羊城杯RE部分
vm_wo 代码copy下来调了一下 vm_body[0]=input[i] vm_body[1]=vm_body[0]>>1 v12=vm_body[0] vm_body[2]=v12& ...
- tomcat远程部署
使用maven的插件对tomcat进行远程部署,大大降低了部署步骤,对于远程部署调试也有一定的帮助 要让maven对够进行远程部署,我们需要对tomcat进行配置,主要是配置tomcat-user.x ...
- 动态规划二 & 贪心算法 实验三
一.贪心算法和动态规划法解决背包问题. 有一个背包其容积 C = 13.现有表格内的物品可以购买. 商品 价格 P 体积 V 啤酒 24 10 汽水 2 3 饼干 9 4 面包 10 5 牛奶 9 4 ...
- Python网络编程——TCP套接字通信、通信循环、链接循环、UDP通信
文章目录 基于TCP的套接字通信 加上通信循环 加上链接循环 基于UDP协议的套接字通信 基于TCP的套接字通信 以买手机的过程为例 服务端代码 import socket # 1.买手机 phone ...
- GPT-4 API waitlist
Skip to main content Site Navigation GPT-4 API waitlist We're making GPT-4 available as an API for d ...
- 教育法学第九章单元测试MOOC
第九章单元测试 返回 本次得分为:100.00/100.00, 本次测试的提交时间为:2020-09-06, 如果你认为本次测试成绩不理想,你可以选择 再做一次 . 1 单选(5分) 作为教师最基本的 ...
- Go通道机制与应用详解
本文深入探讨了Go语言中通道(Channel)的各个方面,从基础概念到高级应用.文章详细解析了通道的类型.操作方法以及垃圾回收机制,更进一步通过具体代码示例展示了通道在数据流处理.任务调度和状态监控等 ...
- mol 文件格式简单解析（v2000）
前言 .mol 文件是常见的化学文件格式,主要包含分子的坐标.分子间的键等数据. 示例文件 下面是一个水分子的 .mol 文件 H2O APtclcactv05052315543D 0 0.00000 ...