vue 路由的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<style>
/*.router-link-active{*/
/*color: red;*/
/*}*/
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
<!--显示路由内容-->
<router-view></router-view>
</div>
</body>
<script>
// 1.定义组件
var home = {
template: '<h1>home</h1>'
};
var news = {
template: '<h1>news</h1>'
};
//2. 配置路由
const routes = [
{path:'/home',component:home},
{path:'/news',component:news},
{path:'*',redirect:'/home'}
];
//3. 配置路由实例
const router = new VueRouter({
routes,
mode:'history', //切换不同的模式
linkActiveClass: "active" //动态类
});
//4. 挂载
new Vue({
el: "#app",
router,
})
</script>
</html>
- hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。 - history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
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 全局守卫 (每个路由调用前都会触发,根据 ...
随机推荐
- oracle sql优化的几种方法
1.最基本最简单的方式是减少访问数据库的次数.oracle在内部执行了许多工作,比如解析SQL语句, 估算索引的利用率, 读数据块等等,都将大量耗费oracle数据库的运行 2.选择最有效率的表名顺 ...
- [Laravel] Laravel的基本数据库操作部分
[laravel] laravel的数据库配置 找到程序目录结构下.env文件 配置基本的数据库连接信息 DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=blog ...
- 用idea搭建SSM项目，原来这么简单
目录 前言 软件环境 创建项目 数据库文件 配置文件 pom.xml log4j.properties jdbc.properties applicationContext.xml spring-mv ...
- C#中构造函数的定义
C#构造函数是在创建给定类型的对象时执行的类方法.构造函数具有与类相同的名称,它通常初始化新对象的数据成员.不带参数的构造函数称为"默认构造函数". 无论何时,只要使用 new 运 ...
- php导出excel再IE下乱码问题
$userBrowser = $_SERVER['HTTP_USER_AGENT']; //判断是否是ie内核 $fileName = '会员列表-'.date('Y-m-d', time()).'. ...
- Go开发之路 -- Go语言基本语法 - 作业
1. 判断101 - 200之间有多少个素数,并输出所有素数. package main import ( "fmt" ) var count = 0 func prime(a, ...
- Installing Fonts programatically C#
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Callable接口--有返回值的线程
Callable java5之前是没有返回值的,Java5新增了Callable接口获得线程的返回值,可返回值的任务必须实现Callable接口,类似的,无返回值的任务必须Runnable接口.Cal ...
- loj#2509. 「AHOI / HNOI2018」排列(思维题 set)
题意 题目链接 Sol 神仙题Orz 首先不难看出如果我们从\(a_i\)向\(i\)连一条边,我们会得到以\(0\)为根的树(因为每个点一定都有一个入度,出现环说明无解),同时在进行排列的时候需要保 ...
- JS性能优化 之 文档片段 createDocumentFragment
我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和 appendChild() .其中 innerHTML 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的 ...