- 了解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. Qt——布局管理器

    教程地址 运行截图: 代码: #include "mainwindow.h" #include <QApplication> #include <QHBoxLay ...

  2. .NET二级域名共享Session

    ASP.NET二级域名站点共享Session状态 今天, 我要写的是如何在二级域名站点之间,主站点和二级域名站点之间共享Session. 首先, Session要共享,站点之间SessionID必须要 ...

  3. springboot---->springboot中的类型转换（一）

    这里面我们简单的学习一下springboot中关于类型转换器的使用.人世间的事情莫过于此,用一个瞬间来喜欢一样东西,然后用多年的时间来慢慢拷问自己为什么会喜欢这样东西. springboot中的类型转 ...

  4. 三元组顺序结构实现稀疏矩阵相加，行序优先(Java语言描述)

    不用十字链表也可以稀疏矩阵相加时间复杂度最坏情况达到O(tuA + tuB);思路比较简单就不赘述了,代码如下: 三元组: package 行逻辑链接的顺序表实现稀疏矩阵的相乘; public cla ...

  5. LeetCode 18 4Sum (4个数字之和等于target)

    题目链接 https://leetcode.com/problems/4sum/?tab=Description 找到数组中满足 a+b+c+d=0的所有组合,要求不重复. Basic idea is ...

  6. 学习生活必须知道的网站或者App

    转载自:https://www.douban.com/group/topic/89798480/ 学习方面: 1.网易公开课(http://v.163.com/special/test/alltest ...

  7. 4G厂商版《出师表》

    转载:http://mp.weixin.qq.com/s?__biz=MzAwNDAyODM0NA==&mid=408013599&idx=1&sn=70cd33d037604 ...

  8. ＣＦ510B Fox And Two Dots（搜索图形环）

    B. Fox And Two Dots time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. 栈和队列的基础算法学习（EPI）

    今天学习的时间虽然挺多的,但是总觉效率不高.其实今天没有按照计划进行EPI题目的浏览,白天去看了其他的书籍.准备找工作可能需要的状态是一定量经典的书,偶尔温习才可.书是看不完的,知识点也是固定的.所以 ...

  10. Scrapy计划表

    第一步 Scrapy 一览:理解Scrapy是什么,他能帮到你什么 安装指南:在电脑上安装Scrapy Scrapy 教程:编写第一个Scrapy项目 示例:通过前人写好的Scrapy项目进行学习 基 ...