<!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. jquery只能输入数字

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. WebService学习概念总结

    概念总结:WebSerevice是一种跨编程语言和跨操作系统平台的远程调用技术传输协议:HTTP技术构成:XML+XSD,SOAP,WSDL    XML封装数据格式,解决数据表示问题    XSD定 ...

  3. iis 站点中文乱码 解决方案

    问题描述:iis乱码问题 1:在vs里开发没问题,发布后用发布文件替换iis文件没问题,但是如果用fis3发布后导致iis站点访问时出现部分中文乱码 原理:文件编码格式不统一 解决方案: 四个步骤解决 ...

  4. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. 【原】Dubbo 多版本号过渡

    之前发过一篇因为接口规范的问题导致其它端出现服务不可用的文章(http://www.cnblogs.com/zdd-java/p/8612763.html),然而最近在查阅了dubbo官方指南文档才知 ...

  6. matlab中常数下的点是什么意思

    加上点"."后表示两个矩阵或向量对应位置进行运算, 这时候要求进行操作的两个变量必须维数相同(与矩阵乘法对矩阵维数要求不同)

  7. oracle数据库相关概念介绍

    数据库相关概念介绍: 问题: 数据存储:变量(基本类型,引用类型) 基本类型:少量数据 引用类型:保证数据的完整性 数据源: 声明直接赋值 IO流从硬盘中读取 java在处理数据时,需要从硬盘中读取数 ...

  8. Mysql数据库单表查询

    1.单表查询语法 #查询数据的本质:mysql会到你本地的硬盘上找到对应的文件,然后打开文件,按照你的查询条件来找出你需要的数据.下面是完整的一个单表查询的语法 select * from,这个sel ...

  9. Java执行sh等

    1.通过java代码,调用bat.shell等脚本或者命令 1)使用Runtime的exec()方法,会返回一个用于管理操作系统进程的Process对象 Process process =null; ...

  10. Javascript异步编程之二回调函数

    上一节讲异步原理的时候基本上把回掉函数也捎带讲了一些,这节主要举几个例子来具体化一下.在开始之前,首先要明白一件事,在javascript里函数可以作为参数进行传递,这里涉及到高阶函数的概念,大家可以 ...