- 了解spa页面跳转方式:(2种)

    spa: 单页跳转方式

        开发(hash模式): https://www.baidu.com/#2313213

        生产(h5利于seo): history.pushState('','','/test'); 只更改url,不会刷新,手动刷新后可能会404

npm install vue vue-router axios bootstrap


- vue-router

1.创建vue-router实例

2.在vm里关联

3.手动访问, 链接后追加#/home 或 #/list访问查看各自组件结果.

<div id="app">

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.创建实例

    let router = new VueRouter({

        routes: [

            {path: '/home', component: {template: '<div>home</div>'}},

            {path: '/list', component: {template: '<div>list</div>'}}

        ],

    });

    let vm = new Vue({

        el: "#app",

        router: router, //关联router

    })

</script>


- 创建链接访问(不适合生产,生产要用history模式)

<div id="app">

    <a href="#/home">home</a> <!--这里是hash模式(加#)-->

    <a href="#/list">list</a>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.创建实例

    let router = new VueRouter({

        routes: [

            {path: '/home', component: {template: '<div>home</div>'}},

            {path: '/list', component: {template: '<div>list</div>'}}

        ],

    });

    let vm = new Vue({

        el: "#app",

        router: router, //关联router

    })

</script>


- 修改链接(使得模式可以切换)

- 切换router的mode,观察链接,(history无#)

<div id="app">

    <router-link to="/home" tag="button">home</router-link>

    <router-link to="/list">list</router-link>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.创建实例

    let router = new VueRouter({

        routes: [

            {path: '/home', component: {template: '<div>home</div>'}},

            {path: '/list', component: {template: '<div>list</div>'}}

        ],

        mode: 'history',

    });

    let vm = new Vue({

        el: "#app",

        router: router, //关联router

    })

</script>


- 通过tag修改元素类型,如button还是a

<div id="app">

    <router-link to="/home" tag="button">home</router-link>

    <router-link to="/list">list</router-link>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.写2个组件

    let home = {template: '<div>home</div>'};

    let list = {template: '<div>list</div>'};

    // 2.关联路径-组件

    let routes = [

        {path: '/home', component: home},

        {path: '/list', component: list},

    ];

    // 3.告知vue

    let router = new VueRouter({

        routes: routes,

        // mode: 'history',

    });

    let vm = new Vue({

        el: "#app",

        data: {

            msg: 'hi',

        },

        router: router,

    })

</script>
  • 修改button样式,

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .router-link-active{

            background-color: palegreen;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/home" tag="button">home</router-link>

    <router-link to="/list" tag="button">list</router-link>

    <router-view></router-view>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // 1.写2个组件

    let home = {template: '<div>home</div>'};

    let list = {template: '<div>list</div>'};

    // 2.关联路径-组件

    let routes = [

        {path: '/home', component: home},

        {path: '/list', component: list},

    ];

    // 3.告知vue

    let router = new VueRouter({

        routes: routes,

        // mode: 'history',

    });

    let vm = new Vue({

        el: "#app",

        data: {

            msg: 'hi',

        },

        router: router,

    })

</script>

</body>

</html>



- linkActiveClass更改默认样式类名, 默认叫router-link-active

    let router = new VueRouter({

        routes: routes,

        // mode: 'history',

        // linkActiveClass: 'router-link-active',

        linkActiveClass: 'active',

    });



- 编程式导航

<div id="app">

                <!--to="/home"-->

    <router-link :to="{path:'/home'}">首页</router-link>

    <router-link :to="{path:'/list'}">列表页</router-link>

    <router-view></router-view>

</div>

<!--编程式导航，在js跳转页面-->

<script src="node_modules/vue/dist/vue.js"></script>

<script src="node_modules/vue-router/dist/vue-router.js"></script>

<script>

    // ['/','/home','/list','/list']

    let home = {

        template:'<div>首页 <button @click="toList">去列表</button></div>',

        methods:{

            // toList(){this.$router.push('/list')} // 强制跳转路径

            toList(){this.$router.push('/list')} // 路由替换，将当前的历史替换掉

        }

    };

    let list = {

        template:'<div>列表 <button @click="back">返回</button></div>',

        methods:{

            back(){this.$router.go(-1)} // 返回某一级 go顶替了back

        }

    };

    let routes = [

        {path:'',component:home}, // 默认展示的路由

        {path:'/home',component:home},

        {path:'/list',component:list},

        //{path:'*',component:list} // 这个地方路径不会变 只是切换了组件而已

        {path:'*',redirect:'/home'}// 路径变 组件也要切换 404的时候

    ];

    let router = new VueRouter({

        routes

    });

    let vm = new Vue({

        el:'#app',

        router, // 每个组件都会拥有一个名字叫$router的属性(有r的放的都是方法) 还有一个名字叫$route(没r的存的都是属性)

    })

</script>

[vue]spa单页开发及vue-router基础的更多相关文章

  1. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  2. 前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)

    前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题 在 SPA 的前端项目中 数据统计,往往就是一个比较麻烦的事情,Re ...

  3. Javascript 与 SPA单页Web富应用

    书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...

  4. 基于VUE的SPA单页应用开发－加载性能篇

    1.基于异步数据的vue页面刷新 先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新 网络请求图 步骤如下: step1:请求页面: step2:请求页 ...

  5. 一套Vue的单页模板：N3-admin

    趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...

  6. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

  7. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  8. SPA单页应用前后分离微信授权

    项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...

  9. 前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router

    开篇日常立个flag-- 前言 最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

随机推荐

  1. thinkphp3.2 实现留言功能

    写一个例子说明一下: 前端:http://www.mmkb.com/zhendao/index/feedback.html <form method="post" actio ...

  2. 浅析TCP字节流与UDP数据报的区别

    转自http://www.linuxidc.com/Linux/2014-11/109545.htm “TCP是一种流模式的协议,UDP是一种数据报模式的协议”,这句话相信大家对这句话已经耳熟能详~但 ...

  3. win7 开机自启动控制

    直接用win+r运行 --- 输入 msconfig 去除“OneNote”开机自启动方法:取消勾选,点击 “应用” ,然后点击“确定” 即可

  4. wireshark 表达式备忘录

    参考资料: https://blog.csdn.net/wojiaopanpan/article/details/69944970 wireshark分两种表达式,一种是捕获表达式,这个是在捕获时用的 ...

  5. Installed .NET Framework 4.5 Ajax POST IIS hang

    去年我已写过一篇关于安装.NET Framework 4.5后特定场景Ajax POST的挂起问题 => http://www.cnblogs.com/junchu25/archive/2012 ...

  6. 【转】Navigation Drawer(导航抽屉)

    创建一个导航抽屉 创建抽屉布局 初始化抽屉列表 处理导航项选点击事件 监听导航抽屉打开和关闭事件 点击应用图标来打开和关闭导航抽屉   创建一个导航抽屉 导航抽屉是一个位于屏幕左侧边缘用来显示应用程序 ...

  7. 【CF662A】Gambling Nim 线性基

    [CF662A]Gambling Nim 题意:n长卡牌,第i张卡牌正面的数字是$a_i$,反面的数字是$b_i$,每张卡牌等概率为正面朝上或反面朝上.现在Alice和Bob要用每张卡牌朝上的数字玩N ...

  8. Node.js 文件系统fs模块

    Node.js 文件系统封装在 fs 模块是中,它提供了文件的读取.写入.更名.删除.遍历目录.链接等POSIX 文件系统操作. 与其他模块不同的是,fs 模块中所有的操作都提供了异步的和 同步的两个 ...

  9. C++/C, Java学习资料

    C++11系列-什么是C++11 [Java]Final 与 C++ Const的区别 C++开发者都应该使用的10个C++11特性 史上最明白的 NULL.0.nullptr 区别分析 C语言堆栈入 ...

  10. EDA优势

    1.提供明确的表述性业务概念 在某些场景下,一个业务概念会被多个流程更改,如果此属性逻辑发生变化,其他关联的流程将无法知晓,导致bug产生 如:出于性能或其他因素考虑下,为A表增加一个冗余字段,操作A ...