<!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. Adapter 适配器模式简介与 C# 示例【结构型1】【设计模式来了_6】

    〇.简介 1.什么是适配器模式? 一句话解释:   两个无关联的类,通过实现同一接口或继承对方得到新的适配器类,新的适配器类中通过实现原本类的操作,可达到进行相同的操作的目的. 适配器模式(Apapt ...

  2. MapReduce核心概念及架构

    MapReduce简介 MapReduce常用于对大规模数据集(大于1TB)的并行运算,或对大数据进行加工.挖掘和优化等处理. MapReduce将并行计算过程高度抽象到了两个函数map和reduce ...

  3. 使用 Python ssh 远程登陆服务器的最佳方案

    在使用 Python 写一些脚本的时候,在某些情况下,我们需要频繁登陆远程服务去执行一次命令,并返回一些结果. 在 shell 环境中,我们是这样子做的. sshpass -p ${passwd} s ...

  4. 「codeforces - 1674F」Madoka and Laziness

    link. 如果做过 codeforces - 1144G 那这题最多 *2200. 序列中的最大值必然为其中一个拐点,不妨设 \(a_p = a_\max\),先讨论另一个拐点 \(i\) 在 \( ...

  5. 「luogu - P3911」最小公倍数之和

    link. Denote \(cnt_{x}\) = the number of occurrences of \(x\), \(h\) = the maximum of \(a_i\), there ...

  6. java开发面试笔记

    目录 1.hashMap hashmap源码分析-逐行注释版: 2.线程池 3.MySQL数据库引擎.事务.锁机制 1. 引擎 2. 事务 索引 3. 锁: 4. 调优问题怎么回答? 4.SQL语句 ...

  7. mysql启动失败，报没有pid错误

    mysql启动失败,报没有pid错误 安装完Mysql后,启动mysqld失败,花了很长时间才找到原因,现在根据网友提供的解决方法汇总一下,方便遇到时可以参考排查 现象:service mysql s ...

  8. ArcGIS将遥感影像的0值设置为NoData

      本文介绍在ArcMap软件中,将栅格图层中的0值或其他指定数值作为NoData值的方法.   在处理栅格图像时,有时会发现如下图所示的情况--我们对某一个区域的栅格数据进行分类着色后,其周边区域( ...

  9. Spring扩展接口（1）：ApplicationContextInitializer

    在此系列文章中,我总结了Spring扩展接口,以及各个扩展点的使用场景.并整理出一个bean在spring中从被加载到初始化到销毁的所有可扩展点的顺序调用图.这样,我们也可以看到bean是如何一步步加 ...

  10. 轻松掌握组件启动之MongoDB（番外篇）：高可用复制集架构环境搭建-mtools

    引言 在前两章节中,我们详细讲解了如何手动配置启动MongoDB.然而,现在有许多不同的工具可以帮助我们更方便地启动和创建MongoDB数据库.因此,今天我将介绍一个名为mtools的开源项目,它可以 ...