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 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- Python 基础面试第二弹
1. 解释下Python中的面向对象,以及面向对象的三大特点: 在Python中,面向对象编程(Object-Oriented Programming,简称OOP)是一种编程范式,它将数据和操作数据的 ...
- .NET周刊【8月第4期 2023-08-27】
国内文章 AgileConfig-1.7.0 发布,支持 SSO https://www.cnblogs.com/kklldog/p/agileconfig-170.html AgileConfig ...
- 小白弄明白了 unix 时间戳的转换问题
小白对于将 unix 时间戳转换为日期时间和使用日期时间转换为 unix 时间戳,在项目中见到过很多,每次使用时不是用现有的方法转换就是网上搜索方法. 小白见过各种转换方式觉得moment库很是方便, ...
- Understanding UML in seconds
UML 是一种分析设计语言,也就是一种建模语言. UML结构解析 UML其结构主要包括以下几个部分: 视图(View) 多个图形组成的集合: 图(Diagram) 图的种类有13种图,但常用的也就两种 ...
- SpringCloud搭建保姆级教程
一.搭建服务注册与发现中⼼ 使⽤Spring Cloud Netflix 中的 Eureka 搭建服务注册与发现中⼼ 1.创建SpringBoot应用添加依赖 1.spring web 2.eurek ...
- Solution -「洛谷 P5355」「YunoOI 2017」由乃的玉米田
Description Link. 见 Link. Solution 前三个操作就是小清新人渣的本愿. 这里简单讲解一下. 记录两个 bitset cla 和 inv. 我们考虑莫队. cla[x]= ...
- Codechef - N Triplets（构造+观察）
题目大意 对于一个正整数N,需要找到三个不同的数字A,B,C,使得三个数当中任意两个数字相乘都是N的约数,另外还要使得A,B,C三个数字乘积是N的整数倍数.最后输出三个数字(如果有多种组合,输出任 ...
- STL容器：map
map 可以当作特殊的数组来使用,在数组开不下,或者数组下标不是整数的时候使用 map 就很方便,比如统计字符串的出现个数,统计 int 范围内的数的出现次数等等. 映射是指两个集合之间的元素的相互对 ...
- P4032 [Code+#2] 火锅盛宴
prologue 树状数组推荐写法,感谢巨佬樱雪喵的教学. inline int lowbit(int x) { return x & -x; } inline void add(int x, ...
- CF1707B [Difference Array]
Problem 题目简述 设序列 \(a\) ,并且是单调递增的.设 \(a\) 当前长度为 \(l\),你要对 \(a\) 作差分,即令 \(b_i = a_{i+1} - a_i(1\le i & ...