<!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>
  1. hash —— 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算)。

    比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。
  2. history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

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. [android] 手机卫士关闭自动更新

    保存数据的四种方式,网络,广播提供者,SharedPreferences,数据库 获取SharedPreferences对象,通过getSharedPreferences()方法,参数:名称,模式 例 ...

  2. elasticsearch6.7 05. Document APIs(3)GET API

    2.GET API get API 可以通过文档id从索引中获取json格式的文档,以下示例从twitter索引中获取type为_doc,id值为0为的JSON文档: GET twitter/_doc ...

  3. music-api-next:一款支持网易、xiami和QQ音乐的JS爬虫库

    音乐,无界 让音乐无界 如果你苦于挑选一个全方位.多平台.简便易用的音乐爬虫库,music-api-next是不二选择. 特性: 支持网易.虾米和QQ三大主流音乐平台 支持音乐关键词搜索 支持音乐链接 ...

  4. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  5. 洛谷P3721 [AH2017/HNOI2017]单旋(线段树 set spaly)

    题意 题目链接 Sol 这题好毒瘤啊.. 首先要观察到几个性质: 将最小值旋转到根相当于把右子树变为祖先的左子树,然后将原来的根变为当前最小值 上述操作对深度的影响相当于右子树不变,其他的位置-1 然 ...

  6. React报错:Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix,

    今天在开发时报了以下错误,记录一下 我们不能在组件销毁后设置state,防止出现内存泄漏的情况 出现原因直接告诉你了,组件都被销毁了,还设置个锤子的state啊 解决方案: 利用生命周期钩子函数:co ...

  7. redis 在Linux下的安装与配置

    redis在Linux下的安装与配置 by:授客  QQ:1033553122 测试环境 redis-3.0.7.tar.gz 下载地址: http://redis.io/download http: ...

  8. Android开发常用的一些功能列表(转)

    文章来源:http://www.cnblogs.com/netsql/archive/2013/03/02/2939828.html 1.软件自动更新下载,并提示 2.软件登录注册,以及状态保存 3. ...

  9. Django 添加mdia文件目录路径

    1.settings.py MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') 2.urls.py from djan ...

  10. Django ModelForm 小实例1

    1.models.py ASSET_STATUS = ( (str(1), u"使用中"), (str(2), u"未使用"), (str(3), u" ...