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 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- QA|requests接口请求失败而postman请求成功原因排查|Requests
requests接口请求失败而postman请求成功原因 代码如下 1 def ihrm_login(login_data, url1): 2 """login_data ...
- nodejs实现的一个简单粗暴的洗牌算法
据说名字长别人不一定看得到 之前用python,自带shuffle用的还是超爽的: 去年6月份自己动手用nodejs写一个21点扑克游戏的后台时,就需要一个洗牌算法,于是简单粗暴的实现了一个. 贴出来 ...
- Solution -「BalticOI 2004」Sequence
Description Link. Given is a sequencen \(A\) of \(n\) intergers. Construct a stricly increasing sequ ...
- ES6 Module模块，在vsCode中已服务器模式运行HTML文件
操作步骤如下: 一.安装Live Server 插件 二.点击扩展设置 三.设置live server默认打开浏览器为"chrome" 四.配置-工作区 五.在HTML文件中,右键 ...
- Http协议之libcurl实现
一.libcurl简介 libcurl是一个跨平台的网络协议库,支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议.libcurl同样支持 ...
- ChatGPT多个APIkey如何自主切换
chatgpt目前账户大多数为18美金,那么用户在调用api时候出现金额不足要手动更换chatgpt 当前方法为了解决多账户自主切换api使用. 创建一个名为$arr的数组,它包含几个key.我们使用 ...
- 报错AttributeError: Attempted to set WANDB to False, but CfgNode is immutable
问题 今天在跑代码的时候,使用到了wandb记录训练数据. 我在23服务器上跑的好好的,但将环境迁移到80服务器上重新开始跑时,却遇到了如下报错 看这个报错信息是由于wandb没有apis这个属 ...
- 算法2：寻找吸血鬼数（JS）
任务二:寻找吸血鬼数 打印所有4位吸血鬼数和它们的獠牙 提示:一共有7个: 吸血鬼数: -该鬼的位数为偶数: -该数的所有位中.是0的位少一半: -该数每一位上的数字重新组合为两个位数相等的数,乘 ...
- Django框架项目之搜索功能——搜索导航栏、搜索后台接口、搜索页面
文章目录 1-搜索导航栏 Header搜索组件:选择性CV router/index.js Header.vue 2-搜索后台接口 路由:course/urls.py 视图:course/views. ...
- MySQL系列之——SQL介绍、常用SQL分类、数据类型、表属性、字符集、DDL应用、DCL应用、DML应用（增删改）、DQL应用(select )、元数据信息、show命令
文章目录 一 SQL介绍 二 常用SQL分类 2.1 客户端命令 三 数据类型.表属性.字符集 3.1 数据类型 3.1.1 作用 3.1.2 种类 3.2 表属性 3.2.1 列属性 3.2.2 表 ...