<!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路由基本操作的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  3. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  4. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. Servlet 上

    Servlet 1.什么是Servlet Servlet即Server Applet是运行在Web服务器端的小程序 2.创建Servlet的三种方式 注意:从Tomcat10.0以后,我们统一用 ja ...

  2. Matplotlib（一）

    Matplotlib(一) Matplotlib库的介绍 Matplotlib库的使用 Matplotlib库由各种可视化类构成,内部结构复杂,受Matlab启发matplotlib.pyplot是绘 ...

  3. 「atcoder - ABC215G」Colorful Candies 2

    link. 称题目中的 \(c_i\) 为 \(a_i\),令 \(c_i\) 为第 \(i\) 种颜色的出现次数,令 \(C\) 为颜色总数.固定 \(k\),令 \(t_i=1\),如果颜色 \( ...

  4. Ds100p -「数据结构百题」31~40

    31.P2163 [SHOI2007]园丁的烦恼] 很久很久以前,在遥远的大陆上有一个美丽的国家.统治着这个美丽国家的国王是一个园艺爱好者,在他的皇家花园里种植着各种奇花异草. 有一天国王漫步在花园里 ...

  5. DESTOON做中英双语言（多语言）切换版本具体详解

    第一次发原创好激动,该注意点什么? 在开发过程中用户有许多要求,比如这个多语言切换就是一个需求. 首先讲解一下DESTOON(DT)后台系统如何做这个中英.甚至多语言切换的这个功能. DT本身不自带多 ...

  6. 这些负载均衡都解决哪些问题？服务、网关、NGINX

    这篇文章解答一下群友的一系列提问: 在微服务项目中,有服务的负载均衡.网关的负载均衡.Nginx的负载均衡,这几个负载均衡分别用来解决什么问题呢? 在微服务项目中,服务的负载均衡.网关的负载均衡和Ng ...

  7. 如何使用Java创建数据透视表并导出为PDF

    摘要:本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 数据透视分析是一种强大的工具,可以帮助我们从大量数据中提取有用信 ...

  8. Telegram 正式引入国产小程序技术

    Telegram 宣布为其开发者提供了一项"能够在 App 中运行迷你应用"的新功能( 迷你应用即 Mini App,下文中以"小程序"代替). 在一篇博客文章 ...

  9. 模拟退火算法（SA）

    求某个目标函数的最值 爬山法 首先我们通过爬山法来引出模拟退火算法 我们先看一个例子:求函数的最值 我们用爬山法解决这个问题的步骤 1.在解空间中随机生成一个初始解(图中小黄点就是我们生成的初始解) ...

  10. 从 SQL 查询优化技巧去看 h2 数据库查询原理

    本文目标是:了解查询的核心原理,对比 SQL 查询优化技巧在 h2database 中的落地实现. 前提:为了贴近实际应用,本文 Code Insight 基于 BTree 存储引擎. 数据查询核心原 ...