[vue]spa单页开发及vue-router基础

- 了解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基础的更多相关文章

做一个gulp+webpack+vue的单页应用开发架子
1.目标最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS)
前端 SPA 单页应用数据统计解决方案 (ReactJS / VueJS) 一.百度统计的代码: UV PV 统计方式可能存在问题在 SPA 的前端项目中数据统计,往往就是一个比较麻烦的事情,Re ...
Javascript 与 SPA单页Web富应用
书单推荐 # <单页Web应用:JavaScript从前端到后端> http://download.csdn.net/detail/epubitbook/8720475 # <MVC ...
基于VUE的SPA单页应用开发－加载性能篇
1.基于异步数据的vue页面刷新先看看基于异步数据的vue页面刷新后,都发生了啥- 如图所示: 图1 基于异步数据的vue页面刷新网络请求图步骤如下: step1:请求页面: step2:请求页 ...
一套Vue的单页模板：N3-admin
趁着周末偷来一点闲,总结近期的工作和学习,想着该花点心思把N3-admin这套基于N3-components的单页应用模板简单的给介绍一下. 首发于个人博客:blog.lxstart.net项目路径: ...
使用Vue构建单页应用一
一. 环境准备 1 安装Node.js 最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/ 我使用的是 v6.3.1 Current 版本.Node. ...
vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境
目录一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...
SPA单页应用前后分离微信授权
项目基于微信公众号开发,业务完全依赖微信授权,也就是用户进入页面已经完成授权获取到用户的OpenId. 需要有一个授权中间页:author.vue 基本实现思路: 无论使用哪个url进入页面都会先触发 ...
前端 JS 原生 javascript 和 location.hash 实现一个单页应用的路由 router
开篇日常立个flag-- 前言最近在做一些应用,类似于单页应用,想实现类似于 Vue 路由的效果. 但是个人 Vue 基础四舍五入约等于无,而且看着 Vue-router 吃力+用不起来(因为我的项 ...

随机推荐

AndroidのTextView之CompoundDrawable那些坑
TextView有几个属性android:drawableXXX,通常是在环绕文字周边显示一个图像,但是这有个坑就是文字和图片可能会对不齐. 纵使你设置gravity还是layout_gravity= ...
【MySQL8】安装后的简单配置（主要解决navicat等客户端登陆报错问题）
一.navicat等客户端登陆报错的原因使用mysql,多数我们还是喜欢用可视化的客户端登陆管理的,个人比较喜欢用navicat.一般装好服务器以后,习惯建一个远程的登陆帐号,在mysql8服务器上 ...
下载Google Play外国区APP技巧
安卓用户若遇到喜欢的APP是外国区的,只要FQ就能下载.比起果粉还要注册,是简便很多.但有没有更简单的办法?这个必须有!笔者前几天在网上闲逛时,就发现了一个给力的网站.让你不用FQ,只需3个步骤,就能 ...
.NET中的三种Timer的区别和用法(收集)
最近正好做一个WEB中定期执行的程序,而.NET中有3个不同的定时器.所以正好研究研究.这3个定时器分别是: 1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗体应用程 ...
iOS －沙盒机制（SandBox)和获取沙盒路径
iOSAPP可以在自己的沙盒里读写文件,但是,不可以访问其他APP的沙盒.每一个APP都是一个信息孤岛,相互是不可以进行通信的,唯独可以通过URLScheme.沙盒里面的文件可以是照片.声音文件.文本 ...
VMware虚拟机安装Ubuntu系统英文改中文的方法
首先点击右上角的这个桌面 1,Change Desktop Background 图片发自简书App 2.到系统设置(System Settings)--- 点击Language Support ...
vue--非父子组件之间的传值
一个项目都有一个根组件 App.vue 一个根组件下面可能会有多个自组件,例如:Hello.vue 和 Header.vue Hello.vue 和 Header.vue 就是兄弟组件,那么这两个兄弟 ...
9.6Django
2018-9-6 12:56:32 2018-9-6 18:32:22 把那个用户列表的页面优化了一下!用了老师更好看的页面,但是功能还是那些! 就是修改一下url就好! 放在我我的github : ...
ABP之框架体系
一 .框架体系的介绍 ABP框架采用的是DDD(领域驱动设计)的原则,可以很方便实现项目之间的松耦合,采用模块化的方式,方便对框架的扩展. 按照DDD的原则,首先将项目分为四层: 展现层:用来展现给用 ...
myeclipse bug
在.metadata上方就不在workspace里面,复制黏贴在下方才可以发布运行

[vue]spa单页开发及vue-router基础

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

随机推荐

热门专题